前言
好久没写博客了，不是我偷懒啊，是我最近刚换工作，忙着熟悉业务和熟悉新生活，还没找到合适的步伐继续前进。
今天要分享的是axios源码。起因是我本来想学ts，然后某课上面有使用ts开发一个axios，再然后我看到中间我就看不懂了，干脆自己来研究一下axios的源码，所以就有了这篇总结了。
功能分析
参考文档和源码，我总结出来大概以下几个功能：
- 发送请求，支持浏览器环境和
Node环境； - 创建
Axios实例； - 有请求和响应拦截器；
- 支持转换请求数据和响应数据
- 支持取消功能；
- 支持并发功能等。
目录分析
- lib
- adapters # 请求封装，适配浏览器和node环境
- cancel # 跟取消相关
- core # 核心内容
- helpers # 工具类函数（可以独立于axios使用）
- axios.js # index.js中就是使用了这个文件
- default.js # 默认配置项
- utils.js # 工具类函数
源码分析
入口文件
从package.json中可以看出，入口文件在index.js中，而index.js的文件引入了lib/axios.js：
function createInstance(){
/** .. */ }
// 创建Axios实例
var axios = createInstance(defaults);
// 便于后续继承Axios
axios.Axios = Axios;
// 跟取消请求有关
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require('./cancel/isCancel');
// 跟并发请求有关
axios.all = function all(promise){
/** .. */ }
axios.spread = require('./helpers/spread');
// 判断请求错误
axios.isAxiosError = require('./helpers/isAxiosError');
module.exports = axios;
module.exports.default = axios;
工具方法
在阅读源码的过程中，强烈推荐大家可以先去把utils.js和helpers文件夹中的代码都过一遍：
// utils.js
// ...
module.exports = {
isArray: isArray,
isArrayBuffer: isArrayBuffer,
isBuffer: isBuffer,
isFormData: isFormData,
isArrayBufferView: isArrayBufferView,
isString: isString,
isNumber: isNumber,
isObject: isObject,
isPlainObject: isPlainObject,
isUndefined: isUndefined,
isDate: isDate,
isFile: isFile,
isBlob: isBlob,
isFunction: isFunction,
isStream: isStream,
isURLSearchParams: isURLSearchParams,
isStandardBrowserEnv: isStandardBrowserEnv,
forEach: forEach, // 遍历对象或者数组
merge: merge, // 将A、B两个变量进行合并
extend: extend, // A继承B的属性
trim: trim,
stripBOM: stripBOM
};
utils.js主要提供了一些is开头的函数来判断是否是某种类型或者格式的变量，还有遍历、合并、继承等工具函数。
helpers文件中有：
- bind.js # 封装了一个类似bind的方法
- buildURL.js # 将params参数拼接在url上
- combineURLs.js # 组合获得新的url
- cookies.js # 针对不同环境，对cookie的读、写、删除的封装
- deprecatedMethod.js # 对废弃方法的警告
- isAbsoluteURL.js # 判断是否是绝对路径
- isAxiosError.js # 判断是否是Axios执行过程中抛出的异常
- isURLSameOrigin.js # 针对不同环境，判断是否跨域
- normalizeHeaderName.js # 格式化header的key
- parseHeaders.js # 格式化header的参数并封装在一个对象中
- spread.js # axios.spread的封装
- validator.js # 校验方法
默认Config
在创建实例的时候，我们会传递一个默认config进去：
var defaults = {
transitional: {
silentJSONParsing: true, // 是否忽略JSON Parse的报错
forcedJSONParsing: true, // resposeType不是json的情况下是否将响应值改为false
clarifyTimeoutError: false // 超时的时候是否用ETIMEDOUT代替ECONNABORTED
},
adapter: getDefaultAdapter(), // 请求方法（浏览器环境就是发起XMLHttpRequest)
// 对请求数据进行转换
transformRequest: [function transformRequest(data, headers) {
normalizeHeaderName(headers, 'Accept');
normalizeHeaderName(headers, 'Content-Type');
if (utils.isFormData(data) ||
utils.isArrayBuffer(data) ||
utils.isBuffer(data) ||
utils.isStream(data) ||
utils.isFile(data) ||
utils.isBlob(data)
) {
return data;
}
if (utils.isArrayBufferView(data)) {
return data.buffer;
}
if (utils.isURLSearchParams(data)) {
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
return data.toString();
}
if (utils.isObject(data) || (headers && headers['Content-Type'] === 'application/json')) {
setContentTypeIfUnset(headers, 'application/json');
return stringifySafely(data);
}
return data;
}],
// 对响应式数据进行转换
transformResponse: [function transformResponse(data) {
var transitional = this.transitional;
var silentJSONParsing = transitional && transitional.silentJSONParsing;
var forcedJSONParsing = transitional && transitional.forcedJSONParsing;
var strictJSONParsing = !silentJSONParsing && this.responseType === 'json';
if (strictJSONParsing || (forcedJSONParsing && utils.isString(data) && data.length)) {
try {
return JSON.parse(data);
} catch (e) {
if (strictJSONParsing) {
if (e.name === 'SyntaxError') {
throw enhanceError(e, this, 'E_JSON_PARSE');
}
throw e;
}
}
}
return data;
}],
// 超时时间，如果为0代表不设置
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。
// 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
// promise 将被 resolve; 否则，promise 将被 rejecte
validateStatus: function validateStatus(status) {
return status >= 200 && status < 300;
}
};
defaults.headers = {
common: {
'Accept': 'application/json, text/plain, */*'
}
};
utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {
defaults.headers[method] = {
};
});
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
defaults.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
});
module.exports = defaults;
Axios类
在createInstance()中new Axios()，Axios的源码在core/Axios.js：
// core/Axios.js
function Axios(instanceConfig) {
// 配置项
this.defaults = instanceConfig;
// 拦截器
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
};
}
// 核心！！！ 请求方法
Axios.prototype.request = function request(config) {
}
// 获得uri
Axios.prototype.getUri = function getUri(config) {
}
// 根据request扩展出不同方法下的请求
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
/*eslint func-names:0*/
Axios.prototype[method] = function(url, config) {
return this.request(mergeConfig(config || {
}, {
method: method,
url: url,
data: (config || {
}).data
}));
};
});
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
/*eslint func-names:0*/
Axios.prototype[method] = function(url, data, config) {
return this.request(mergeConfig(config || {
}, {
method: method,
url: url,
data: data
}));
};
});
module.exports = Axios;
拦截器
在看request实现之前，先重点看看拦截器：
function Axios(instanceConfig) {
// 配置项
this.defaults = instanceConfig;
// 拦截器
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
};
}
InterceptorManager定义在core/InterceptorManager.js中：
function InterceptorManager() {
this.handlers = [];
}
// use是添加拦截器，其中fulfilled和rejected对应的就是promise的那两个
InterceptorManager.prototype.use = function use(fulfilled, rejected, options) {
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected,
synchronous: options ? options.synchronous : false,
runWhen: options ? options.runWhen : null
});
return this.handlers.length - 1;
};
// eject删除拦截器
InterceptorManager.prototype.eject = function eject(id) {
if (this.handlers[id]) {
this.handlers[id] = null;
}
};
// forEach遍历拦截器
InterceptorManager.prototype.forEach = function forEach(fn) {
utils.forEach(this.handlers, function forEachHandler(h) {
if (h !== null) {
fn(h);
}
});
};
module.exports = InterceptorManager;
拦截器的核心就是定义了一个handlers数组，每次新增一个拦截器，就新增一个fulfilled、rejected、synchronous和runWhen的对象，然后放置到handlers数组中，如果要删除，将该对应的handlers[index]置为空，这样遍历的时候，就不会被执行了。
request请求
Axios.prototype.request = function request(config) {
// 支持axios(url[, config])
if (typeof config === 'string') {
config = arguments[1] || {
};
config.url = arguments[0];
} else {
// 支持axios(config)
config = config || {
};
}
// 将用户的config和默认config进行合并
config = mergeConfig(this.defaults, config);
// 设置method
if (config.method) {
config.method = config.method.toLowerCase();
} else if (this.defaults.method) {
config.method = this.defaults.method.toLowerCase();
} else {
config.method = 'get';
}
// 配置transitional
var transitional = config.transitional;
if (transitional !== undefined) {
validator.assertOptions(transitional, {
silentJSONParsing: validators.transitional(validators.boolean, '1.0.0'),
forcedJSONParsing: validators.transitional(validators.boolean, '1.0.0'),
clarifyTimeoutError: validators.transitional(validators.boolean, '1.0.0')
}, false);
}
// 添加请求拦截器，顺序是倒叙的
// 比如 调用 A B C接口，那么请求拦截器的顺序为[C、B、A]
var requestInterceptorChain = [];
var synchronousRequestInterceptors = true;
this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
if (typeof interceptor.runWhen === 'function' && interceptor.runWhen(config) === false) {
return;
}
synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous;
requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
});
// 添加响应拦截器，顺序是倒正叙的
// 比如 调用 A B C接口，那么请求拦截器的顺序为[A、B、C]
var responseInterceptorChain = [];
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);
});
var promise;
// 如果是异步的话
if (!synchronousRequestInterceptors) {
var chain = [dispatchRequest, undefined];
Array.prototype.unshift.apply(chain, requestInterceptorChain);
chain = chain.concat(responseInterceptorChain);
promise = Promise.resolve(config);
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}
return promise;
}
// 如果是同步的话
// 先执行 请求拦截器
// 执行请求
// 执行 响应拦截器
var newConfig = config;
while (requestInterceptorChain.length) {
var onFulfilled = requestInterceptorChain.shift();
var onRejected = requestInterceptorChain.shift();
try {
newConfig = onFulfilled(newConfig);
} catch (error) {
onRejected(error);
break;
}
}
try {
promise = dispatchRequest(newConfig);
} catch (error) {
return Promise.reject(error);
}
while (responseInterceptorChain.length) {
promise = promise.then(responseInterceptorChain.shift(), responseInterceptorChain.shift());
}
return promise;
};
Axios直接发起请求
上面封装了request，这就不难理解createInstance了：
function createInstance(defaultConfig) {
var context = new Axios(defaultConfig);
// 把request直接赋值给instance
var instance = bind(Axios.prototype.request, context);
utils.extend(instance, Axios.prototype, context);
utils.extend(instance, context);
instance.create = function create(instanceConfig) {
return createInstance(mergeConfig(defaultConfig, instanceConfig));
};
return instance;
}
取消请求
源码中跟取消相关的一共就三个文件：
// cancel/Cancel.js
// Cancel就是一个含有message属性的类
function Cancel(message) {
this.message = message;
}
Cancel.prototype.toString = function toString() {
return 'Cancel' + (this.message ? ': ' + this.message : '');
};
Cancel.prototype.__CANCEL__ = true;
module.exports = Cancel;
// cancel/CancelToken.js
function CancelToken(executor) {
if (typeof executor !== 'function') {
throw new TypeError('executor must be a function.');
}
var resolvePromise;
this.promise = new Promise(function promiseExecutor(resolve) {
resolvePromise = resolve;
});
var token = this;
executor(function cancel(message) {
if (token.reason) {
return;
}
token.reason = new Cancel(message);
resolvePromise(token.reason);
});
}
CancelToken.prototype.throwIfRequested = function throwIfRequested() {
if (this.reason) {
throw this.reason;
}
};
CancelToken.source = function source() {
var cancel;
var token = new CancelToken(function executor(c) {
cancel = c;
});
return {
token: token,
cancel: cancel
};
};
module.exports = CancelToken;
// cancel/isCancel.js
module.exports = function isCancel(value) {
return !!(value && value.__CANCEL__);
};
其实我没用过取消请求的功能，在看React相关的小册子的时候，那个作者提到了一个实际案例：
实时搜索的过程中，除了使用防抖/节流，还可以搭配取消请求，因为最后搜索的时候，前一个请求可能还没结束，这时候可以在发起请求之前，取消前面的请求。
这里给一个其他作者写的实际用例：axios中取消请求及阻止重复请求的方法
如有错误欢迎指出，感谢阅读~