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 相关文章推荐
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
Javascript window对象详解
Nov 12 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
js实现省市级联效果分享
Aug 10 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
jQuery实现本地存储
Dec 22 jQuery
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操作数组的一些函数整理介绍
2011/07/17 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python 回溯法模板详解
2020/02/26 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
高中运动会广播稿
2014/01/21 职场文书
火灾现场处置方案
2014/05/28 职场文书
导游词之广西漓江
2019/11/02 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript