axios请求拦截器,也就是在请求发送之前执行自定义的函数。

axios源码版本 - ^0.27.2 (源码是精简版)

平时在业务中会这样去写请求拦截器,代码如下:

// 创建一个新的实例
var service = axios.create(); // 请求拦截器
service.interceptors.request.use((config) => {
// 请求头加token
config.headers['token'] = 'xxx';
... ... ... return config;
}, (err) => {
return Promise.reject(err);
});

其中 service.interceptors.request.use 方法起到了作用,其核心源码如下:

/* axios/core/Axios.js */
// Axios构造函数
function Axios(defaultConfig) {
this.defaults = defaultConfig;
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
}
} /* axios/core/InterceptorManager.js */
// InterceptorManager构造函数
function InterceptorManager() {
// 默认空数组
this.handlers= [];
} // InterceptorManager原型上定义use方法 (上述业务中的use方法,其实就是调用了该方法)
InterceptorManager.prototype.use = function(fulfilled, rejected) {
// 数组中push一个包含成功回调、失败回调的对象
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected
}); // 返回数组长度 - 1
return this.handlers.length - 1;
} // InterceptorManager原型上定义eject方法
InterceptorManager.prototype.eject = function(id) {
if (this.handlers[id]) {
this.handlers[id] = null;
}
} // InterceptorManager原型上定义forEach方法
InterceptorManager.prototype.forEach = function(fn) {
utils.forEach(this.handlers, function(h) {
if (h !== null) {
fn(h);
}
});
}

service.interceptors.request.use 原来就是向handlers数组push了一个对象,可打印信息查看,代码如下:

console.log(service.interceptors.request.handlers);
// 结果如下
[
{
fulfilled: (config) => {...},
rejedcted: (err) => {...}
}
]

那么,在发送请求时,请求拦截器是如何运作的,代码如下:

Axios.prototype.request = function(defaultConfigOrUrl, config) {
... ... ... var requestInterceptorChain = [];
this.interceptors.request.forEach(function (interceptor) {
// 将该实例的this.this.interceptors.request.handlers放入requestChain
requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
}); var promise; // dispatchRequest就是请求过程
var chain = [dispatchRequest, undefined];
Array.prototype.unshift.apply(chain, requestInterceptorChain); promise = Promise.resolve(config);
while (chain.length) {
// 链式调用,不断减少chain数组的长度,直至为空
promise = promise.then(chain.shift(), chain.shift());
} return promise; ... ... ...
}

这也便是说为什么axios是基于promise的,请求拦截器 --> 请求 --> 响应拦截器。

取消拦截器

取消拦截器功能,作者觉得作用不大,代码如下:

var requestNumber = service.interceptors.request.use(fulfilled, rejected);

// 取消请求拦截器
service.interceptors.request.reject(requestNumber); service.post({})

多个请求拦截器

主要讲多个请求拦截器的执行顺序,代码如下:

// 第一个请求拦截器
service.interceptors.request.use(fulfilled1, rejected1); // 第二个请求拦截器
service.interceptors.request.use(fulfilled2, rejected2); // 第三个请求拦截器
service.interceptors.request.use(fulfilled3, rejected3); // 根据上述Axios.prototype.request方法,可以知道handlers数组:[fulfilled3, rejected3, fulfilled2, rejected2, fulfilled1, rejected1] // 所以执行顺序:fulfilled3 --> fulfilled2 --> fulfilled1

axios源码解析 - 请求拦截器的更多相关文章

  1. axios 源码解析(下) 拦截器的详解

    axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种: 请求拦截器    ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要 ...

  2. Okhttp3源码解析(5)-拦截器RetryAndFollowUpInterceptor

    ### 前言 回顾: [Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f) [Okhttp3源码解析(1)-OkHttpClient分析](htt ...

  3. Okhttp3源码解析(4)-拦截器与设计模式

    ### 前言 回顾: [Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f) [Okhttp3源码解析(1)-OkHttpClient分析](htt ...

  4. 源码解析Grpc拦截器(C#版本)

    前言 其实Grpc拦截器是我以前研究过,但是我看网上相关C#版本的源码解析相对少一点,所以笔者借这篇文章给大家分享下Grpc拦截器的实现,废话不多说,直接开讲(Grpc的源码看着很方便,包自动都能还原 ...

  5. axios源码解析 - 请求方法的别名实现

    axios中的创建请求方式很多,比如axios(url),axios.get(url),axios.post(url),axios.delete(url),方便快捷的api设计让axios火得一塌糊涂 ...

  6. springMVC源码分析之拦截器

    一个东西用久了,自然就会从仅使用的层面上升到探究其原理的层面,在javaweb中springmvc更是如此,越是优秀的框架,其底层实现代码更是复杂,而在我看来,一个优秀程序猿就相当于一名武林高手,不断 ...

  7. springMVC源码分析--HandlerInterceptor拦截器调用过程(二)

    在上一篇博客springMVC源码分析--HandlerInterceptor拦截器(一)中我们介绍了HandlerInterceptor拦截器相关的内容,了解到了HandlerInterceptor ...

  8. axios 源码解析(中) 代码结构

    axios现在最新的版本的是v0.19.0,本节我们来分析一下它的实现源码,首先通过 gitHub地址获取到它的源代码,地址:https://github.com/axios/axios/tree/v ...

  9. Struts 2.3.24源码解析+Struts2拦截参数,处理请求,返回到前台过程详析

    Struts2官网:http://struts.apache.org/ 目前最新版本:Struts 2.3.24 Struts1已经完全被淘汰了,而Struts2是借鉴了webwork的设计理念而设计 ...

随机推荐

  1. Spring AOP and AspectJ AOP 有什么区别?

    Spring AOP 基于动态代理方式实现:AspectJ 基于静态代理方式实现.Spring AOP 仅支持方法级别的 PointCut:提供了完全的 AOP 支持,它还支持属性级别的 PointC ...

  2. 学习Git(二)

    常用命令 git add 添加 git status 查看状态 git status -s 状态概览 git diff 对比 git diff --staged 对比暂存区 git commit 提交 ...

  3. java后端使用token处理表单重复提交

    保证接口幂等性,表单重复提交 前台解决方案:提交后按钮禁用.置灰.页面出现遮罩后台解决方案:   使用token,每个token只能使用一次1.在调用接口之前生成对应的Token,存放至redis 2 ...

  4. 1. 了解Git和Github

    1. 了解Git和Github 1.1 什么是Git Git是一个免费.开源的版本控制软件 1.2 什么是版本控制系统 版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版本修订情况得系统. ...

  5. 小程序输入框闪烁BUG解决方案

    前言 本人所说的小程序,都是基于mpvue框架而上的,因此BUG可能是原生小程序的,也有可能是mpvue的. 问题描述 在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标 ...

  6. java中Object类是怎么回事,干嘛使的?举例说明!

    Object类的作用:m a r k - t o-        w i n: 在java中,因为所有的类都有共性,所以java的缔造者们把java设计成这样:所有的类都是Object类的直接或间接子 ...

  7. Java中jdk安装与环境变量配置

    Java中jdk安装与环境变量配置 提示:下面是jdk1.7和jdk1.8的百度网盘链接 链接:https://pan.baidu.com/s/1SuHf4KlwpiG1zrf1LLAERQ 提取码: ...

  8. EMS邮件统计

    前提条件:管理员拥有"Organization Management"权限.并且启用邮件跟踪日志. 1.统计时间段内邮件发送情况 案例任务:统计一段时间内服务器"MAIL ...

  9. 通过uniCloud白捡一个在线图库管理工具,可支持图床外链

    喜欢写文章的技术大佬们,应该都有一个自己的在线图片管理工具吧. 尤其是在写markdown时,为了让我们的文章"图文并茂",显得不那么枯燥,就经常需要在合适的地方插入一些关联性的图 ...

  10. HttpRequest.Path与HttpRequest.PathBase区别

    源自stackoverflow