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常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
vue中echarts引入中国地图的案例
Jul 28 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
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
Python中的index()方法使用教程
2015/05/18 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
交通安全演讲稿
2014/01/07 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
社会实践活动总结报告
2014/04/29 职场文书
出国留学担保书
2014/05/20 职场文书
财务稽核岗位职责
2015/04/13 职场文书
2015年预算员工作总结
2015/05/14 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
分享python函数常见关键字
2022/04/26 Python
Win10 Anaconda安装python-pcl
2022/04/29 Servers