关于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 相关文章推荐
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
javascript实现左右缓动动画函数
Nov 25 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实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python取均匀不重复的随机数方式
2019/11/27 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
python绘制趋势图的示例
2020/09/17 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
精彩的广告词
2014/03/19 职场文书
劲霸男装广告词
2014/03/21 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
世界环境日活动总结
2015/02/11 职场文书
寒假安全保证书
2015/02/28 职场文书
任命书标准格式
2015/03/02 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
高考1977观后感
2015/06/04 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书