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 json2 使用方法
Mar 16 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
js getBoundingClientRect使用方法详解
Jul 17 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原创论坛
2006/10/09 PHP
构建简单的Webmail系统
2006/10/09 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
win10安装python3.6的常见问题
2020/07/01 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
python3中数组逆序输出方法
2020/12/01 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
美国折扣网站:jClub
2017/08/07 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
会计出纳岗位职责
2013/12/25 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
《称象》教学反思
2014/04/25 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python