vue axios用法教程详解


Posted in Javascript onJuly 23, 2017

axios是vue-resource后出现的Vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios。

下面我们来使用axios

npm install axios --save-dev 
 import axios from "axios"

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题

1 1.    Vue.prototype.$ajax=axios

好像还有另外一种方法,是不需要去修改Vue的原型的,那就是我们除了npm install安装axios依赖以外,再去安装一个vue-axios

npm install vue-axios --save-dev<br>import Vueaxios from "vue-axios"

 我都是用第一种方法的,这种没试过,有兴趣大家可以去试试。

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令

methods: {
 submitForm () {
  this.$ajax({
   method: 'post',
   url: '你的请求url',
   data: {
    name: 'haha','
   }
  })
}

上述只是写了发起请求,并没有请求返回数据的回调。

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})

这是axios的回调函数,.then为请求成功的回调函数,而.catch为请求失败的回调函数

这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例,怎么办嘞????

只要添加一个 .bind(this) 就能解决这个问题

then(function(res){
 console.log(this.data)
}.bind(this))

以上所述是小编给大家介绍的vue axios用法教程详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
详解js的六大数据类型
Dec 27 Javascript
jQuery文字轮播特效
Feb 12 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
vuex存储token示例
Nov 11 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 #Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 #Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 #Javascript
js实现带进度条提示的多视频上传功能
Dec 13 #Javascript
基于javaScript的this指向总结
Jul 22 #Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
基于LayUI实现前端分页功能的方法
Jul 22 #Javascript
You might like
PHP 批量删除数据的方法分析
2009/10/30 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
老师推荐信
2013/10/28 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
工程招投标邀请书
2014/01/30 职场文书
购房委托书
2014/10/15 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python