axios源码解析 - 请求拦截器
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源码解析 - 请求拦截器的更多相关文章
- axios 源码解析(下) 拦截器的详解
axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种: 请求拦截器 ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要 ...
- Okhttp3源码解析(5)-拦截器RetryAndFollowUpInterceptor
### 前言 回顾: [Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f) [Okhttp3源码解析(1)-OkHttpClient分析](htt ...
- Okhttp3源码解析(4)-拦截器与设计模式
### 前言 回顾: [Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f) [Okhttp3源码解析(1)-OkHttpClient分析](htt ...
- 源码解析Grpc拦截器(C#版本)
前言 其实Grpc拦截器是我以前研究过,但是我看网上相关C#版本的源码解析相对少一点,所以笔者借这篇文章给大家分享下Grpc拦截器的实现,废话不多说,直接开讲(Grpc的源码看着很方便,包自动都能还原 ...
- axios源码解析 - 请求方法的别名实现
axios中的创建请求方式很多,比如axios(url),axios.get(url),axios.post(url),axios.delete(url),方便快捷的api设计让axios火得一塌糊涂 ...
- springMVC源码分析之拦截器
一个东西用久了,自然就会从仅使用的层面上升到探究其原理的层面,在javaweb中springmvc更是如此,越是优秀的框架,其底层实现代码更是复杂,而在我看来,一个优秀程序猿就相当于一名武林高手,不断 ...
- springMVC源码分析--HandlerInterceptor拦截器调用过程(二)
在上一篇博客springMVC源码分析--HandlerInterceptor拦截器(一)中我们介绍了HandlerInterceptor拦截器相关的内容,了解到了HandlerInterceptor ...
- axios 源码解析(中) 代码结构
axios现在最新的版本的是v0.19.0,本节我们来分析一下它的实现源码,首先通过 gitHub地址获取到它的源代码,地址:https://github.com/axios/axios/tree/v ...
- Struts 2.3.24源码解析+Struts2拦截参数,处理请求,返回到前台过程详析
Struts2官网:http://struts.apache.org/ 目前最新版本:Struts 2.3.24 Struts1已经完全被淘汰了,而Struts2是借鉴了webwork的设计理念而设计 ...
随机推荐
- ACL 权限控制机制 ?
UGO(User/Group/Others) 目前在 Linux/Unix 文件系统中使用,也是使用最广泛的权限控制方式.是一种粗 粒度的文件系统权限控制模式. ACL(Access Control ...
- 单片,SOA 和微服务架构有什么区别?
单片架构类似于大容器,其中应用程序的所有软件组件组装在一起并紧密 封装.第一个面向服务的架构是一种相互通信服务的集合.通信可以涉及简单的数 据传递,也可以涉及两个或多个协调某些活动的服务.微服务架构是 ...
- Mybatis-Plus 如何实现一对多关系 举例 用户与角色
Mybatis-Plus 一对多Mybatis-Plus 不写一句sql语句实现一对多 首先来看效果 Mysql数据库 用户表 角色表 用户与角色的中间表 中间表如下 将三张表通过Mybatis Pl ...
- C++中sort()函数使用介绍
sort()简介 为什么选择使用sort() 在刷题的时候我们经常会碰到排序的问题,如果我们不使用一些排序的方法那我们只能手撕排序,这样就会浪费一些时间.而且我们还需要根据需要去选择相关的排序方法: ...
- Spring Security OAuth 笔记
1 单点登录 关于单点登录的原理,我觉得下面这位老哥讲的比较清楚,有兴趣可以看一下,下面我把其中的重点在此做个笔记总结 https://juejin.cn/post/6844904079274197 ...
- 《深入理解ES6》笔记——扩展对象的功能性(4)
变量功能被加强了.函数功能被加强了,那么作为JavaScript中最普遍的对象,不加强对得起观众吗? 对象类别 在ES6中,对象分为下面几种叫法.(不需要知道概念) 1.普通对象 2.特异对象 3.标 ...
- java中到底什么是继承?
1.何为继承?What is Inheritance? 在上图中,对于车来讲,汽车就是子类.对于汽车来讲,奔驰就是子类.车是汽车的基类,超类,或说父类.到底什么是继承?马克-to-win,子类把父类的 ...
- java栈stack和堆heap的工作原理,用途及区别?举例说明
java堆和栈的区别[新手可忽略不影响继续学习] Java中内存分成两种:一种是栈stack,一种是堆heap.函数中的一些基本类型的变量(int, float)和对象的引用变量(reference) ...
- CSS简单样式练习(一)
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- vue引入echarts
效果图: 1.安装Echarts : npm install echarts -S 或者使用国内的淘宝镜像: 安装: npm install -g cnpm --registry=https: ...