关于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 相关文章推荐
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
javascript history对象详解
Feb 09 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
python使用SMTP发送qq或sina邮件
2017/10/21 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
python 编写简单网页服务器的实例
2018/06/01 Python
python flask实现分页的示例代码
2018/08/02 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
信息简报范文
2015/07/21 职场文书
师德师风培训感言
2015/08/03 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python