三步法解析Axios源碼
關(guān)注公眾號(hào)“執(zhí)鳶者”，回復(fù)“紅寶書”獲取大量前端學(xué)習(xí)資料。
一、領(lǐng)悟思想
Axios是一個(gè)基于Promise的HTTP庫，根據(jù)官網(wǎng)介紹，有以下幾個(gè)特點(diǎn)：
在瀏覽器端會(huì)創(chuàng)建XMLHttpRequests
在Node端會(huì)創(chuàng)建HTTP請求
由于Axios是一個(gè)基于Promise的HTTP庫，所以其支持Promise API
支持請求和響應(yīng)攔截器
支持請求和響應(yīng)數(shù)據(jù)轉(zhuǎn)換
支持取消請求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防御XSRF攻擊
通過上述官網(wǎng)介紹的特點(diǎn)，我認(rèn)為其突出的優(yōu)點(diǎn)有三個(gè)：
支持Promise API，可以方便進(jìn)行鏈?zhǔn)秸{(diào)用；
支持請求和響應(yīng)攔截器，該攔截器將Node中中間件思想引入該庫，在請求發(fā)送之前和響應(yīng)接收之后可以對其進(jìn)行處理。
支持?jǐn)?shù)據(jù)轉(zhuǎn)換器，轉(zhuǎn)換器主要負(fù)責(zé)數(shù)據(jù)發(fā)送前以及響應(yīng)接收后對數(shù)據(jù)的處理。
二、把握設(shè)計(jì)
理解了該庫設(shè)計(jì)的特點(diǎn)，下面從源碼目錄、抽象接口及核心設(shè)計(jì)原理三個(gè)層面對Axios進(jìn)行整體的把握。
2.1 源碼目錄
如下所示是Axios的源碼目錄及各個(gè)文件的作用
2.2 抽象接口
對源碼的目錄有了一定了解，下面利用UML類圖對該系統(tǒng)各個(gè)模塊的依賴關(guān)系進(jìn)一步了解，為后續(xù)源碼分析打好基礎(chǔ)。（看該圖注意對著源碼一起看）
2.3 設(shè)計(jì)原理
首先看一段代碼，這段代碼的執(zhí)行順序包含著Axios的核心原理。
axios.defaults.baseURL = 'http://localhost:8080'
// 請求攔截器一
axios.interceptors.request.use(
config => {
console.log('請求攔截器一', config);
return config;
},
error => {
console.log('request interceptor rejected1');
return Promise.reject(error);
}
);
// 請求攔截器二
axios.interceptors.request.use(
config => {
console.log('請求攔截器二', config);
return config;
},
error => {
console.log('request interceptor rejected2');
return Promise.reject(error);
}
);
// 響應(yīng)攔截器一
axios.interceptors.response.use(
response => {
console.log('響應(yīng)攔截器一', response);
return response;
},
error => {
console.log('response interceptor rejected1');
return Promise.reject(error);
}
);
// 響應(yīng)攔截器二
axios.interceptors.response.use(
response => {
console.log('響應(yīng)攔截器二', response);
return response;
},
error => {
console.log('response interceptor rejected2');
return Promise.reject(error);
}
);
axios('/', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data: {
test: 'test'
},
// 請求轉(zhuǎn)換器
transformRequest: [(data, headers) => {
console.log('請求轉(zhuǎn)換器', data);
return JSON.stringify(data)
}],
// 響應(yīng)轉(zhuǎn)換器
transformResponse: [(response, headers) => {
console.log('響應(yīng)轉(zhuǎn)換器', response);
return response;
}]
})
.then((response) => {
console.log(response.data)
})
寫了這么多代碼，大家肯定對這段代碼的執(zhí)行結(jié)果很感興趣，為了滿足各位看客的好奇心，下面就直接拋出來這段結(jié)果。
不過單看執(zhí)行結(jié)果也不能了解其核心設(shè)計(jì)原理呀，老鐵別急，其實(shí)小小代碼就已經(jīng)包含了Axios的整個(gè)執(zhí)行過程，通過觀察結(jié)果及代碼可以將整個(gè)過程簡化為下圖：
其核心原理就是這個(gè)嗎？是的，你沒有看錯(cuò)，這就是Axios的核心設(shè)計(jì)原理，通過一系列鏈?zhǔn)降奶幚砭湍軌虻玫剿枰慕Y(jié)果。
三、體會(huì)細(xì)節(jié)
宏觀的事聊完了，下面就詳細(xì)聊幾個(gè)核心細(xì)節(jié)吧：整個(gè)流程、請求/響應(yīng)攔截器、dispatchRequest是個(gè)啥、請求/響應(yīng)數(shù)據(jù)轉(zhuǎn)換器。
3.1 整體運(yùn)行流程
在第二章中闡述了該核心原理，老鐵們一定對該整體是如何運(yùn)轉(zhuǎn)起來的很感興趣吧，下面就來解答各位老鐵的疑惑——Axios
function Axios(instanceConfig) {
this.defaults = instanceConfig;
// 攔截器實(shí)例化
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
};
}
// 通過一系列的繼承綁定操作，該函數(shù)其實(shí)就是axios函數(shù)
Axios.prototype.request = function request(config) {
// ……
config = mergeConfig(this.defaults, config);
// Set config.method
// ……
// ****核心****
// 存儲(chǔ)該調(diào)用鏈的數(shù)組
var chain = [dispatchRequest, undefined];
var promise = Promise.resolve(config);
// 將請求攔截器的內(nèi)容塞到數(shù)組前面（注意用的unshift函數(shù)，這就很好的解釋了為什么先調(diào)用的請求攔截器后執(zhí)行）
this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
chain.unshift(interceptor.fulfilled, interceptor.rejected);
});
// 將響應(yīng)攔截器的內(nèi)容塞到數(shù)組后面
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
chain.push(interceptor.fulfilled, interceptor.rejected);
});
// 利用Promise將整個(gè)數(shù)組中的內(nèi)容串起來，這樣就可以按照順序鏈?zhǔn)綀?zhí)行了
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}
return promise;
};
是不是很巧妙？通過利用數(shù)組先來存儲(chǔ)需要的內(nèi)容，先處理的在數(shù)組的前面（請求攔截器），后處理的在數(shù)組的后面（響應(yīng)攔截器），然后利用Promise將整個(gè)內(nèi)容串起來，很好的處理網(wǎng)絡(luò)請求屬于異步的問題——Perfect。
3.2 請求/響應(yīng)攔截器
通過觀察第二部分的執(zhí)行結(jié)果我們已經(jīng)了解了請求/響應(yīng)攔截器，下面就做一下總結(jié)：
請求攔截器就是在發(fā)送請求前執(zhí)行的回調(diào)函數(shù)，個(gè)人認(rèn)為其最大功用就是對多個(gè)請求的配置進(jìn)行統(tǒng)一修改
仔細(xì)觀察發(fā)現(xiàn)請求攔截器1先加入但是后執(zhí)行，是不是與整體運(yùn)行流程中的代碼對上了。
響應(yīng)攔截器就是在請求得到響應(yīng)后執(zhí)行的回調(diào)函數(shù)，成功回調(diào)的參數(shù)就是響應(yīng)response，其可以對多個(gè)請求的響應(yīng)進(jìn)行統(tǒng)一修改。
先拋出請求/響應(yīng)攔截器的核心代碼
function InterceptorManager() {
this.handlers = [];
}
// 注冊攔截器
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
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;
}
};
// 對攔截器進(jìn)行分發(fā)
InterceptorManager.prototype.forEach = function forEach(fn) {
utils.forEach(this.handlers, function forEachHandler(h) {
if (h !== null) {
fn(h);
}
});
};
看看攔截器的核心源碼，是不是發(fā)現(xiàn)與一種設(shè)計(jì)模式很像？對的，就是觀察者模式。當(dāng)調(diào)用use方法的時(shí)候就會(huì)將回調(diào)函數(shù)（成功、失敗）保存至handlers屬性上，方便后期的調(diào)用；當(dāng)調(diào)用eject方法的時(shí)候就會(huì)刪除對應(yīng)索引位置回調(diào)函數(shù)；當(dāng)調(diào)用forEach方法的時(shí)候就會(huì)就會(huì)對handlers屬性（存儲(chǔ)的攔截器回調(diào)）中的內(nèi)容進(jìn)行分發(fā)。
3.3 dispatchRequest是個(gè)啥
前面聊了整個(gè)請求的請求前（請求攔截器）和請求后（響應(yīng)攔截器），是不是感覺少點(diǎn)東西，如何發(fā)請求，這就是我們本次要與大家一起嘮的dispatchRequest(config)。
module.exports = function dispatchRequest(config) {
// ……
//請求數(shù)據(jù)轉(zhuǎn)換
config.data = transformData(
config.data,
config.headers,
config.transformRequest
);
// ……
// 獲取適配器：自己配置了就選自己的，自己沒有設(shè)置就選默認(rèn)的（瀏覽器端就選xhrAdapter、node端就選httpAdapter；這也就是為什么Axios即支持瀏覽器又支持Node的原因）
var adapter = config.adapter || defaults.adapter;
return adapter(config).then(function onAdapterResolution(response) {
// ……
// 響應(yīng)數(shù)據(jù)轉(zhuǎn)換器
response.data = transformData(
response.data,
response.headers,
config.transformResponse
);
return response;
}, function onAdapterRejection(reason) {
if (!isCancel(reason)) {
// ……
// 響應(yīng)數(shù)據(jù)轉(zhuǎn)換器
if (reason && reason.response) {
reason.response.data = transformData(
reason.response.data,
reason.response.headers,
config.transformResponse
);
}
}
return Promise.reject(reason);
});
};
通過觀察整個(gè)請求流程中的中間環(huán)節(jié)——dispatchRequest，它一共做了三件事：
調(diào)用請求數(shù)據(jù)轉(zhuǎn)換器轉(zhuǎn)換請求數(shù)據(jù)
選擇合適的適配器發(fā)起請求——自己配置了就選自己的，自己沒有配置就選默認(rèn)的（瀏覽器端就選xhrAdapter、node端就選httpAdapter；這也就是為什么Axios即支持瀏覽器又支持Node的原因）
當(dāng)請求數(shù)據(jù)返回后，調(diào)用響應(yīng)數(shù)據(jù)轉(zhuǎn)換器轉(zhuǎn)換響應(yīng)數(shù)據(jù)
3.4 請求/響應(yīng)數(shù)據(jù)轉(zhuǎn)換器
既然3.3中提到了請求/響應(yīng)轉(zhuǎn)換器，本節(jié)就來聊一聊它倆。
// 核心源碼
module.exports = function transformData(data, headers, fns) {
utils.forEach(fns, function transform(fn) {
data = fn(data, headers);
});
return data;
};
請求數(shù)據(jù)轉(zhuǎn)換調(diào)用，實(shí)質(zhì)上就是利用請求數(shù)據(jù)轉(zhuǎn)換器對請求頭和請求數(shù)據(jù)進(jìn)行特定的處理（transformRequest為處理函數(shù)的數(shù)組，defaults中包含默認(rèn)的配置）
config.data = transformData(
config.data,
config.headers,
config.transformRequest
);
響應(yīng)數(shù)據(jù)轉(zhuǎn)換調(diào)用類似于請求數(shù)據(jù)轉(zhuǎn)換調(diào)用,對響應(yīng)體進(jìn)行一系列的處理（transformResponse為處理函數(shù)的數(shù)組，defaults中包含默認(rèn)的配置）
response.data = transformData(
response.data,
response.headers,
config.transformResponse
);
四、結(jié)語
上述三章對Axios進(jìn)行整體的分析，從Axios的特點(diǎn)、整體設(shè)計(jì)及關(guān)鍵環(huán)節(jié)三個(gè)方面進(jìn)行了講述，通過閱讀源碼學(xué)到了很多知識(shí)，也能夠更加熟練的使用Axios。為了保證各位老鐵的學(xué)習(xí)Axios源碼的效果，對學(xué)習(xí)Axios源碼的兩條建議：
邊閱讀本文邊看源碼，能夠有更深入的理解。
不要糾結(jié)于具體的實(shí)現(xiàn)，從宏觀的角度去看源碼，這樣能夠節(jié)省大量時(shí)間。
掃碼關(guān)注公眾號(hào)，訂閱更多精彩內(nèi)容。
