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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
vue如何从接口请求数据
Jun 22 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vite + React从零开始搭建一个开源组件库
Jun 25 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中用正则表达式清除字符串的空白
2011/01/17 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
vue双向绑定及观察者模式详解
2019/03/19 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
Django中处理出错页面的方法
2015/07/15 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
浅谈HTML5 & CSS3的新交互特性
2016/07/19 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
经济与贸易专业应届生求职信
2013/11/19 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
自荐信格式范文
2015/03/04 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript