vue-axios使用详解


Posted in Javascript onMay 10, 2017

vue-axios

GET请求

axios.get("/user?id=1")
  .then(function(response){
  })
  .catch(function(error){
  })

POST请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

合并请求

function getUserAccount() {
 return axios.get('/user/12345');
}

function getUserPermissions() {
 return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread(function (acct, perms) {
  // Both requests are now complete
 }));

配置

import Qs from 'qs'
{
 //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
 url: '/user',

 // 请求方法同上
 method: 'get', // default
 // 基础url前缀
 baseURL: 'https://some-domain.com/api/',




 transformRequest: [function (data) {
  // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)

data = Qs.stringify({});
  return data;
 }],

 transformResponse: [function (data) {
  // 这里提前处理返回的数据

  return data;
 }],

 // 请求头信息
 headers: {'X-Requested-With': 'XMLHttpRequest'},

 //parameter参数
 params: {
  ID: 12345
 },

 //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错
 data: {
  firstName: 'Fred'
 },
 auth: {
  username: 'janedoe',
  password: 's00pers3cret'
 },
 //设置超时时间
 timeout: 1000,
 //返回数据类型
 responseType: 'json', // default

  .....等等
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
详解axios在vue中的简单配置与使用
May 10 #Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JavaScript实现form表单的多文件上传
Mar 27 #Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 #Javascript
利用PM2部署node.js项目的方法教程
May 10 #Javascript
全面解析vue中的数据双向绑定
May 10 #Javascript
利用forever和pm2部署node.js项目过程
May 10 #Javascript
You might like
关于手调机和数调机的选择
2021/03/02 无线电
php中的观察者模式
2010/03/24 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
python中lambda与def用法对比实例分析
2015/04/30 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
python虚拟环境迁移方法
2019/01/03 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
django和flask哪个值得研究学习
2020/07/31 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
数控专业个人求职信范文
2014/02/05 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
生死抉择观后感
2015/06/09 职场文书
物业公司管理制度
2015/08/05 职场文书