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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP学习笔记之二 php入门知识
2011/01/12 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
jQuery技巧总结
2011/01/01 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
介绍一下linux文件系统分配策略
2013/02/25 面试题
性能测试工程师的面试题
2015/02/20 面试题
移交协议书
2014/08/19 职场文书
工作失误检讨书
2015/01/26 职场文书
全陪导游词开场白
2015/05/29 职场文书
士兵突击观后感
2015/06/16 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python