关于vue中的ajax请求和axios包问题


Posted in Javascript onApril 19, 2018

在vue中,经常会用到数据请求,常用的有:vue-resourse、axios

今天我说的是axios的post请求

github源文件及文档地址:【https://github.com/axios/axios】

+ 首先,引入axios

CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
npm: npm install axios   并在全局的js中引入:import axios from 'axios';

•get请求

axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

•post请求

依赖于qs包,将对象转换成以&连接的字符串
//例:
axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) {
  console.log(response);
})

附录:配置 axios

上面封装的方法中,使用了 axios 的三个配置项,实际上只有 url 是必须的,完整的 api 可以参考使用说明

为了方便,axios 还为每种方法起了别名,比如上面的 saveForm 方法等价于:

axios.post('/user', context.state.test02)

完整的请求还应当包括 .then 和 .catch

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

当请求成功时,会执行 .then,否则执行 .catch

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

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

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

总结

以上所述是小编给大家介绍的关于vue中的ajax请求和axios包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
原生javascript实现连连看游戏
Jan 03 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
详解vue 数据传递的方法
Apr 19 #Javascript
Vue 去除路径中的#号
Apr 19 #Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 #Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 #Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 #Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 #Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 #Javascript
You might like
一篇入门的php Class 文章
2007/04/04 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
Js+XML 操作
2006/09/20 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
jquery replace方法去空格
2017/05/08 jQuery
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python与C互相调用的方法详解
2017/07/14 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
什么是索引指示器
2012/08/20 面试题
Linux上比较文件的命令都有哪些
2012/02/24 面试题
2015年办公室主任工作总结
2015/04/09 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
个人欠条范本
2015/07/03 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript