本文分析了axios是如何通过朴素而简单的方式，实现了网络请求封装中的各种扩展功能的
封装，是程序员除了造轮子之外最喜欢做的事了。各种API、库要想用得顺手，一般都要根据实际需求进行一层封装，以便优化一些粗糙的调用方式，添加一些扩展的实用功能。
一个好的封装，除了满足应用场景、具备通用性易用性外，特别重要的一个要求就是：
薄
用最少的代码，既要实现调用优化和功能扩展，又不能增加过多体积和性能的负担。
很多经典的框架和库都为“薄”提供了很好的范例。
Axios是近年来备受推崇的一个网络请求库，它以基于Promise的方式封装了浏览器的XMLHttpRequest和服务器端node http请求，使得我们可以用es6推荐的异步方式处理网络请求。
为何axios能得到大家的青睐，在不同的生态圈都有优异的表现呢？在官方文档中，是这样介绍它的feature的：
- 从浏览器创建XMLHttpRequest
- 从node.js创建http请求
- 支持Promise API
- 拦截请求与响应
- 转换请求与响应数据
- 取消请求
- 自动转换JSON数据
- 支持客户端XSRF攻击防护
可以看到，除了Promise封装网络请求的基本功能外，它还实现了多个实用的扩展功能，但最终打包出来的axios.min.js文件体积只有13KB，确实是做到了“薄”。
下面本文将带学习赏鉴axios的源码是如何通过朴素而巧妙的方式实现拦截请求与响应、转换请求与响应数据、自动转换JSON数据、支持客户端XSRF攻击防护等功能的，有以下两点说明：
- 本文不在分析XMLHttpRequest具体封装的代码，作为历史的特殊产物XMLHttpRequest API的设计较为粗糙，不具有太多借鉴学习意义，且已逐渐被Fetch API替代
- 取消请求这一功能不做分析，该功能是基于cancelable promises的提案实现的，该提案已被撤回，开发组目前暂停了该功能的更新支持，今后将换用其他方式（如果有的话）实现：
拦截请求与响应
功能的使用
首先我们来看文档中关于axios拦截器的使用，axios拦截器分为请求拦截器和响应拦截器。用户可以通过then方法为请求添加回调，而拦截器中的回调将在then中的回调之前执行：
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
移除已经设置的拦截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
给自定义的axios实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
Promise then() 方法回顾
axios作为基于Promise的请求封装，其拦截器是通过then方法实现的，通过教程我们先简单回顾一下该方法：
Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数。
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});
上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。
采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function funcA(comments) {
console.log("Resolved: ", comments);
}, function funcB(err){
console.log("Rejected: ", err);
});
上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为Resolved，就调用funcA，如果状态变为Rejected，就调用funcB。
源码分析
通过Axios的构造函数，我们可以看出，interceptors中的request和response两者都是通过一个InterceptorManager的对象进行管理：
\lib\core\Axios.js L15
function Axios(instanceConfig) {
this.defaults = instanceConfig;
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
};
}
来到InterceptorManager构造函数的定义文件：
\lib\core\InterceptorManager.js L5
function InterceptorManager() {
this.handlers = [];
}
/**
* 在栈中添加interceptor
* @param {Function} fulfilled 作为Promise的resolve回调
* @param {Function} rejected 作为Promise的reject回调
* @return {Number} interceptor ID以便移除时使用
*/
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected
});
return this.handlers.length - 1;
};
/**
* 从栈中移除interceptor
* @param {Number} id use方法返回的ID
*/
InterceptorManager.prototype.eject = function eject(id) {
if (this.handlers[id]) {
this.handlers[id] = null;
}
};
/**
* 遍历所有的interceptor，会跳过已移除的interceptor
* @param {Function} fn 遍历执行的回调
*/
InterceptorManager.prototype.forEach = function forEach(fn) {
utils.forEach(this.handlers, function forEachHandler(h) {
if (h !== null) {
fn(h);
}
});
};
module.exports = InterceptorManager;
InterceptorManager的对象中是通过handlers数组变量存储拦截器，数组每项同时包含了分别作为Promise中resolve和reject的回调。InterceptorManager类中还包含了对该数组变量的添加、移除、遍历方法。
值得一提的是，移除方法是通过直接将该项设为null实现的，而不是用splice剪切该数组，遍历方法中也增加了相应的null值处理。这样做一方面使得每一项ID保持为项的数组索引不变，另一方面也避免了重新剪切拼接数组的性能损失。
InterceptorManager的具体使用依然要回到Axios类的定义中来：
\lib\core\Axios.js L46
Axios.prototype.request = function request(config) {
// 挂载interceptor中间件
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);
});
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}
return promise;
};
当执行request的时候，实际请求（dispatchRequest）、请求拦截、响应拦截通过一个数组变量chain来存储和管理，最终都通过then方法添加到promise中，具体的存储和挂载过程如下图：
通过巧妙的利用unshift、push、shift等数组队列、栈方法，实现了请求拦截、执行请求、响应拦截的流程设定，注意无论是请求拦截还是响应拦截，越先添加的拦截器总是越“贴近”执行请求本身。
转换请求与响应数据
功能使用
通过transformRequest和transformResponse，可链式的传递函数数组对数据进行转换：
{
// 转换请求数据，注意只有'PUT', 'POST', 和'PATCH'有请求体
// 最后一个转换函数必须返回合法的请求数据类型
transformRequest: [function (data) {
// Do whatever you want to transform the data
return data;
}],
// 转换返回数据，将在then回调之前执行
transformResponse: [function (data) {
// Do whatever you want to transform the data
return data;
}],
}
源码分析
在实际执行请求的transformResponse中，会调用transformData函数，对请求和响应数据进行转换：
\lib\core\dispatchRequest.js L30, L56, L69
module.exports = function dispatchRequest(config) {
// Transform request data
config.data = transformData(
config.data,
config.headers,
config.transformRequest
);
return adapter(config).then(function onAdapterResolution(response) {
// Transform response data
response.data = transformData(
response.data,
response.headers,
config.transformResponse
);
return response;
}, function onAdapterRejection(reason) {
if (!isCancel(reason)) {
// Transform response data
if (reason && reason.response) {
reason.response.data = transformData(
reason.response.data,
reason.response.headers,
config.transformResponse
);
}
}
return Promise.reject(reason);
});
};
在transformData函数中会遍历调用设置的函数数组中的各个函数：
\lib\core\transformData.js L13
module.exports = function transformData(data, headers, fns) {
utils.forEach(fns, function transform(fn) {
data = fn(data, headers);
});
return data;
};
值得一提的是，通过阅读源码可知，用户设置的转换函数，可将headers作为第二个参数，这样在转换函数中可以根据headers中的信息执行不同的操作。
自动转换JSON数据
在默认情况下，axios将会自动的将传入的data对象序列化为JSON字符串，将响应数据中的JSON字符串转换为JavaScript对象。这是一个非常实用的功能，但实现起来非常简单：
\lib\defaults.js L28
var defaults = {
transformRequest: [function transformRequest(data, headers) {
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data);
}
return data;
}],
transformResponse: [function transformResponse(data) {
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) { /* Ignore */ }
}
return data;
}],
};
支持客户端XSRF攻击防护
XSRF攻击，即“跨站请求伪造”(Cross Site Request Forgery)攻击。通过窃取用户cookie，让用户在本机（即拥有身份 cookie 的浏览器端）发起用户所不知道的请求。防护XSRF攻击的一种方法是设置特殊的xsrf token，axios实现了对这种方法的支持：
\lib\defaults.js L68
{
// `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default
}
\lib\adapters\xhr.js L108
module.exports = function xhrAdapter(config) {
return new Promise(function dispatchXhrRequest(resolve, reject) {
// Add xsrf header
// This is only done if running in a standard browser environment.
// Specifically not if we're in a web worker, or react-native.
if (utils.isStandardBrowserEnv()) {
var cookies = require('./../helpers/cookies');
// Add xsrf header
var xsrfValue = (config.withCredentials || isURLSameOrigin(config.url)) && config.xsrfCookieName ?
cookies.read(config.xsrfCookieName) :
undefined;
if (xsrfValue) {
requestHeaders[config.xsrfHeaderName] = xsrfValue;
}
}
});
};
除了以上feature中列出的主要扩展功能外，axios还提供了诸如内置的jwt、错误处理等其他实用功能。
总结
我们可以看到，axios在实现封装网络请求所需的各项扩展功能时，都是使用的最朴素JavaScript源生方法，并且总是通过简单的链式then方法将这些功能与核心的promise对象关联。此外各种优化性能的方法，也都是采用的很基本的原理。
这对于现在前端离了工具库就写不了代码的现状，很有启发意义。
