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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
jQuery 使用个人心得
Feb 26 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
Apr 23 Javascript
js数组的操作指南
Dec 28 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
linux下编译安装memcached服务
2014/08/03 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
python中argparse模块用法实例详解
2015/06/03 Python
python计算auc指标实例
2017/07/13 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
django的autoreload机制实现
2020/06/03 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
完美主义个人的自我评价
2014/02/17 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
太行山上观后感
2015/06/05 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python