关于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的闭包的一个示例说明
Nov 18 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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 代码优化之经典示例
2011/03/24 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python 拼接文件路径的方法
2018/10/23 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
美国在线珠宝商店:SZUL
2017/02/11 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
教师求职信
2014/06/17 职场文书
施工单位安全责任书
2014/07/24 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
公司证明怎么写
2014/09/22 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
入伍通知书
2015/04/23 职场文书
入党申请书怎么写?
2019/06/11 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书