axios使用拦截器统一处理所有的http请求的方法


Posted in Javascript onNovember 02, 2018

axios使用拦截器

  在请求或响应被 then 或 catch 处理前拦截它们。

http request拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
 }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
 });

http respones拦截器

// 添加响应拦截器
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 () {/*...*/});

PS:下面看下axios拦截器使用

import axios from 'axios' // axios引用
import store from '../../store' // store引用
const serivce = axios.create({ // 创建服务
 baseURL: 'http://test.api.rujiaowang.net', // 基础路径
 timeout: 5000 // 请求延时
})
serivce.interceptors.request.use( // 请求拦截
 config => {
  if (store.getters.userToken) {
   config.headers['X-Token'] = store.getters.userToken
   config.headers['User-Type'] = store.getters.userType ? store.getters.userType : '' // 请求头中存放用户信息
   config.onUploadProgress = (progressEvent) => {
    var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
    store.dispatch('setupLoadPercent', complete)
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)
serivce.interceptors.response.use( // 回复拦截,主要针对部分回掉数据状态码进行处理
 response => {
  return response
 },
 error => {
  return Promise.reject(error)
 }
)
export default serivce

总结

以上所述是小编给大家介绍的axios使用拦截器统一处理所有的http请求的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
js转html实体的方法
Sep 27 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 #Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 #Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 #Javascript
微信小程序实现留言板(Storage)
Nov 02 #Javascript
微信小程序实现留言板功能
Nov 02 #Javascript
小程序实现留言板
Nov 02 #Javascript
js中的闭包实例展示
Nov 01 #Javascript
You might like
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
layui使用label标签的方法
2019/09/14 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
六个窍门助你提高Python运行效率
2015/06/09 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python执行精确的小数计算方法
2019/01/21 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
python和php哪个容易学
2020/06/19 Python
如何卸载python插件
2020/07/08 Python
应届大专毕业生自我鉴定
2014/04/08 职场文书
广告学专业求职信
2014/06/19 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
小型婚礼主持词
2015/06/30 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP