Vue 中axios配置实例详解


Posted in Javascript onJuly 27, 2018

1.GET 请求

//向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 也可以通过 params 对象传递参数
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

2.POST请求

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

3执行多个并发请求

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) {
//两个请求现已完成
}));

4.请求配置

这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定方法,请求将默认为GET.

{  // `url`是将用于请求的服务器URL
  url: '/user',
  // `method`是发出请求时使用的请求方法
  method: 'get', // 默认
  // `baseURL`将被添加到`url`前面,除非`url`是绝对的。
  // 可以方便地为 axios 的实例设置`baseURL`,以便将相对 URL 传递给该实例的方法。
  baseURL: 'https://some-domain.com/api/',
  // `transformRequest`允许在请求数据发送到服务器之前对其进行更改
  // 这只适用于请求方法'PUT','POST'和'PATCH'
  // 数组中的最后一个函数必须返回一个字符串,一个 ArrayBuffer或一个 Stream
  transformRequest: [function (data) {
  // 做任何你想要的数据转换
  return data;
  }],
  // `transformResponse`允许在 then / catch之前对响应数据进行更改
  transformResponse: [function (data) {
  // Do whatever you want to transform the data
  return data;
  }],
  // `headers`是要发送的自定义 headers
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params`是要与请求一起发送的URL参数
  // 必须是纯对象或URLSearchParams对象
  params: {
  ID: 12345
  },
  // `paramsSerializer`是一个可选的函数,负责序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
  return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  // `data`是要作为请求主体发送的数据
  // 仅适用于请求方法“PUT”,“POST”和“PATCH”
  // 当没有设置`transformRequest`时,必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream
  data: {
  firstName: 'Fred'
  },
  // `timeout`指定请求超时之前的毫秒数。
  // 如果请求的时间超过'timeout',请求将被中止。
  timeout: 1000,
  // `withCredentials`指示是否跨站点访问控制请求
  // should be made using credentials
  withCredentials: false, // default
  // `adapter'允许自定义处理请求,这使得测试更容易。
  // 返回一个promise并提供一个有效的响应(参见[response docs](#response-api))
  adapter: function (config) {
  /* ... */
  },
  // `auth'表示应该使用 HTTP 基本认证,并提供凭据。
  // 这将设置一个`Authorization'头,覆盖任何现有的`Authorization'自定义头,使用`headers`设置。
  auth: {
  username: 'janedoe',
  password: 's00pers3cret'
  },
  // “responseType”表示服务器将响应的数据类型
  // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
  //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default
  // `xsrfHeaderName`是携带xsrf令牌值的http头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
  // `onUploadProgress`允许处理上传的进度事件
  onUploadProgress: function (progressEvent) {
  // 使用本地 progress 事件做任何你想要做的
  },
  // `onDownloadProgress`允许处理下载的进度事件
  onDownloadProgress: function (progressEvent) {
  // Do whatever you want with the native progress event
  },
  // `maxContentLength`定义允许的http响应内容的最大大小
  maxContentLength: 2000,
  // `validateStatus`定义是否解析或拒绝给定的promise
  // HTTP响应状态码。如果`validateStatus`返回`true`(或被设置为`null` promise将被解析;否则,promise将被
   // 拒绝。
  validateStatus: function (status) {
  return status >= 200 && status < 300; // default
  },
  // `maxRedirects`定义在node.js中要遵循的重定向的最大数量。
  // 如果设置为0,则不会遵循重定向。
  maxRedirects: 5, // 默认
  // `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
  // 允许配置类似`keepAlive`的选项,
  // 默认情况下不启用。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  // 'proxy'定义代理服务器的主机名和端口
  // `auth`表示HTTP Basic auth应该用于连接到代理,并提供credentials。
  // 这将设置一个`Proxy-Authorization` header,覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。
  proxy: {
  host: '127.0.0.1',
  port: 9000,
  auth: : {
  username: 'mikeymike',
  password: 'rapunz3l'
  }
  },
  // “cancelToken”指定可用于取消请求的取消令牌
  // (see Cancellation section below for details)
  cancelToken: new CancelToken(function (cancel) {
  })
 }

5.全局axios默认值

axios.defaults.baseURL = 'https://api.example.com';
 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

6.拦截器

你可以截取请求或响应在被 then 或者 catch 处理之前

//添加请求拦截器<==>请求发起前做的事
axios.interceptors.request.use(function(config){
   //在发送请求之前做某事
   return config;
  },function(error){
   //请求错误时做些事
   return Promise.reject(error);
  });
//添加响应拦截器<==>响应回来后做的事
axios.interceptors.response.use(function(response){
   //对响应数据做些事
   return response;
  },function(error){
   //请求错误时做些事
   return Promise.reject(error);
  });

   如果你以后可能需要删除拦截器。、

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
  axios.interceptors.request.eject(myInterceptor);

    你可以将拦截器添加到axios的自定义实例

var instance = axios.create();
  instance.interceptors.request.use(function () {/*...*/});

总结

以上所述是小编给大家介绍的Vue 中axios配置实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 #Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 #Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 #Javascript
JavaScript事件对象event用法分析
Jul 27 #Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 #Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 #Javascript
浅谈Redux中间件的实践
Jul 27 #Javascript
You might like
PHP 数组基础知识小结
2010/08/20 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
php使用正则验证中文
2016/04/06 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
python实现简单ftp客户端的方法
2015/06/28 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
使用Python设计一个代码统计工具
2018/04/04 Python
对python多线程与global变量详解
2018/11/09 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
浅析python中的del用法
2020/09/02 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
eBay加拿大站:eBay.ca
2019/06/20 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
幼儿园义卖活动方案
2014/01/17 职场文书
运动会通讯稿100字
2014/01/31 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2014年党建工作总结
2014/11/11 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
大学生实习证明
2015/06/16 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
基于Python实现西西成语接龙小助手
2022/08/05 Golang