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旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
js实现导航吸顶效果
Feb 24 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
JS性能优化实现方法及优点进行
Aug 30 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中的escape函数
2013/06/29 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python生成随机密码的方法
2017/06/16 Python
Python查询IP地址归属完整代码
2017/06/21 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
医学护理系毕业生求职信
2013/10/01 职场文书
读书活动实施方案
2014/03/10 职场文书
平安工地建设方案
2014/05/06 职场文书
建筑安全责任书范本
2014/07/24 职场文书
教师个人事迹材料
2014/12/17 职场文书
财务人员岗位职责
2015/02/03 职场文书
经济纠纷起诉状
2015/05/20 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python