原文链接
在Axios中拦截器是如何注册和调用的呢？上面咱们一起来看看
浏览器端Axios调用流程如下：
初始化Axios——> 注册拦截器 ——> 申请拦挡——> ajax申请 ——> 响应拦挡 ——> 申请响应回调Axios初始化
第一步：当然调用Axios申请时初始化了
// 初始化Axiosfunction Axios(instanceConfig) { this.defaults = instanceConfig; this.interceptors = { request: new InterceptorManager(), response: new InterceptorManager() };}module.exports = Axios;InterceptorManager和InterceptorManager函数别离是是request拦截器和response拦截器，注册拦截器回调函数，这里只会讲/申请拦截器/，因为响应拦截器根本也是这个流程；这样咱们应用axios.request.use来增加拦截器函数时，理论就是InterceptorManager实例对象办法，那么这里InterceptorManager函数做了什么呢？
InterceptorManager注册拦挡函数
function InterceptorManager() { this.handlers = [];}//负责将拦挡回调函数保留在handlers中InterceptorManager.prototype.use = function use(fulfilled, rejected) { this.handlers.push({ fulfilled: fulfilled, rejected: rejected }); return this.handlers.length - 1;};通过axios.request.use和axios.response.use申请、回调拦截器增加拦截器，理论就是调用用InterceptorManager下的use办法，将回调函数保留在this.handlers数组中。
调用拦截器函数和申请函数
一下就是调用申请的理论代码，调用Axios下的request办法，同时也会先进行一次参数合并
this.request(mergeConfig(config || {}, { method: method, url: url, data: (config || {}).data}));上面就是request办法的理论代码，如下：
Axios.prototype.request = function request(config) { // dispatchRequest函数即ajax申请函数 var chain = [dispatchRequest, undefined]; var promise = Promise.resolve(config); this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) { chain.unshift(interceptor.fulfilled, interceptor.rejected); }); this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) { chain.push(interceptor.fulfilled, interceptor.rejected); }); // 组装 Promise 调用链,实现链式调用 while (chain.length) { promise = promise.then(chain.shift(), chain.shift()); } return promise;};在下面的代码中chain变量的理论值是这样的：
chain = [申请回调拦挡函数, 申请异样回调拦挡函数, dispatchRequest, undefined, 响应回调拦挡函数, 响应异样回调拦挡函数 ]而后通过循环，应用Promise链式调用，来实现申请拦挡——> ajax申请 ——> 响应拦挡的性能，最初将后果return进去，十分的奇妙！！
看上面的就了解了????
<center>（图起源自转载）</center>
参考：
77.9K Star 的 Axios 我的项目有哪些值得借鉴的中央
Axios拦截器外围源码