关于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结合css实现网页换肤功能
Nov 02 Javascript
JS 对象介绍
Jan 20 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 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/03 咖啡文化
php 抽象类的简单应用
2011/09/06 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python小白切忌乱用表达式
2020/05/29 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
解释一下Windows的消息机制
2014/01/30 面试题
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
翻译专业应届生求职信
2013/11/23 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
学习考察心得体会
2014/09/04 职场文书
2014年协会工作总结
2014/11/22 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书