关于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 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
JavaScript Array对象使用方法解析
Sep 24 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读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
会计工作岗位职责
2015/02/03 职场文书
中秋节感想
2015/08/10 职场文书
初中语文教学随笔
2015/08/15 职场文书
初中英语教学反思范文
2016/02/15 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
使用CSS实现音波加载效果
2023/05/07 HTML / CSS