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 1.4.2发布!主要是性能与API
Feb 25 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 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
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
FCK调用方法..
2006/12/21 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
python字符串中的单双引
2017/02/16 Python
python保存文件方法小结
2018/07/27 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python for循环及基础用法详解
2019/11/08 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
python实现串口通信的示例代码
2020/02/10 Python
python怎么自定义捕获错误
2020/06/29 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
Python中如何定义一个函数
2016/09/06 面试题
银行简历自我评价
2014/02/11 职场文书
货车司机岗位职责
2014/03/18 职场文书
室内设计专业自荐信
2014/05/31 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
颐和园英文导游词
2015/01/30 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
十二月早安励志心语大全
2019/12/03 职场文书