关于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 相关文章推荐
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
js数组依据下标删除元素
Apr 14 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
基于openlayers实现角度测量功能
Sep 28 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
php防止sql注入代码实例
2013/12/18 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python实现大文件排序的方法
2015/07/10 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
Django视图和URL配置详解
2018/01/31 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
中间件分为哪几类
2016/09/18 面试题
测绘工程个人的自我评价
2013/11/23 职场文书
《口技》教学反思
2014/02/21 职场文书
应聘护士求职信
2014/07/21 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
村官2015年度工作总结
2015/10/14 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby