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 相关文章推荐
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
javascript异常处理实现原理详解
Feb 17 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常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
实例讲解vue源码架构
2019/01/24 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
高中国旗下的演讲稿
2014/08/28 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android