经验分享 前端 前端框架 Axios 源码解析-完整篇

// 举个例子，类似：axios.get(url, {}) > axios.create(url, {}) > 内部默认设置

config = mergeConfig(this.defaults, config);

// 拦截器（请求和响应）

var requestInterceptorChain = [{

fulfilled: interceptor.request.fulfilled,

rejected: interceptor.request.rejected

}];

var responseInterceptorChain = [{

fulfilled: interceptor.response.fulfilled,

rejected: interceptor.response.rejected

}];

var promise;

// 形成一个 promise 链条的数组

var chain = [].concat(requestInterceptorChain, chain, responseInterceptorChain);

// 传入配置

promise = Promise.resolve(config);

// 形成 promise 链条调用

while (chain.length) {

promise = promise.then(chain.shift(), chain.shift());

}

…

return promise;

};

通过对数组的遍历，形成一条异步的 promise 调用链，是 axios 对 promise 的巧妙运用，用一张图表示

拦截器 (lib/core/InterceptorManager.js)

上面说到的 promise 调用链，里面涉及到拦截器，拦截器比较简单，挂载一个属性和三个原型方法

handler: 存放 use 注册的回调函数

use: 注册成功和失败的回调函数

eject: 删除注册过的函数

forEach: 遍历回调函数，一般内部使用多，比如：promise 调用链那个方法里，循环遍历回调函数，存放到 promise 调用链的数组中

function InterceptorManager() {

// 存放 use 注册的回调函数

this.handlers = [];

}

InterceptorManager.prototype.use = function use(fulfilled, rejected, options) {

// 注册成功和失败的回调函数

this.handlers.push({

fulfilled: fulfilled,

rejected: rejected,

…

});

return this.handlers.length - 1;

};

InterceptorManager.prototype.eject = function eject(id) {

// 删除注册过的函数

if (this.handlers[id]) {

this.handlers[id] = null;

}

};

InterceptorManager.prototype.forEach = function forEach(fn) {

// 遍历回调函数，一般内部使用多

utils.forEach(this.handlers, function forEachHandler(h) {

if (h !== null) {

fn(h);

}

});

};

参考文章

 您阅读本篇文章共花了：