关于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 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
jQuery Ajax全解析
Feb 13 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
JavaScript实现简单随机点名器
Nov 21 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Python 项目转化为so文件实例
2019/12/23 Python
Python用input输入列表的实例代码
2020/02/07 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
计算机专业大学生的自我评价
2013/11/14 职场文书
2014年党支部工作总结
2014/11/13 职场文书
婚礼新人答谢词
2015/01/04 职场文书
前台岗位职责范本
2015/04/16 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers