概述
前端開發中，經常會遇到發送異步請求的場景。一個功能齊全的 HTTP 請求庫可以大大降低我們的開發成本，提高開發效率。
axios 就是這樣一個 HTTP 請求庫，近年來非常熱門。目前，它在 GitHub 上擁有超過 40,000 的 Star，許多權威人士都推薦使用它。
因此，我們有必要了解下 axios 是如何設計，以及如何實現 HTTP 請求庫封裝的。撰寫本文時，axios 當前版本為 0.18.0，我們以該版本為例，來閱讀和分析部分核心源代碼。axios 的所有源文件都位於 lib 文件夾中，下文中提到的路徑都是相對於 lib 來說的。
本文我們主要討論：
- 怎樣使用 axios。
- axios 的核心模塊（請求、攔截器、撤銷）是如何設計和實現的？
- axios 的設計優點是什麼？
如何使用 axios
要理解 axios 的設計，首先需要看一下如何使用 axios。我們舉一個簡單的例子來說明下 axios API 的使用。
發送請求
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});這是一個官方示例。從上面的代碼中可以看到，axios 的用法與 jQuery 的 ajax 方法非常類似，兩者都返回一個 Promise 對象（在這裡也可以使用成功回調函數，但還是更推薦使用 Promise 或 await），然後再進行後續操作。
這個實例很簡單，不需要我解釋了。我們再來看看如何添加一個攔截器函數。
添加攔截器函數
axios.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});從上面的代碼，我們可以知道：發送請求之前，我們可以對請求的配置參數（config）做處理；在請求得到響應之後，我們可以對返回數據做處理。當請求或響應失敗時，我們還能指定對應的錯誤處理函數。
撤銷 HTTP 請求
在開發與搜索相關的模塊時，我們經常要頻繁地發送數據查詢請求。一般來說，當我們發送下一個請求時，需要撤銷上個請求。因此，能撤銷相關請求功能非常有用。axios 撤銷請求的示例代碼如下：
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('請求撤銷了', thrown.message);
} else {
}
});
axios.post('/user/12345', {
name: '新名字'
}, {
cancelToken: source.token
}).
source.cancel('用戶撤銷了請求');
從上例中可以看到，在 axios 中，使用基於 CancelToken 的撤銷請求方案。然而，該提案現已撤回，詳情如 點這裡。具體的撤銷請求的實現方法，將在後面的源代碼分析的中解釋。
axios 核心模塊的設計和實現
通過上面的例子，我相信每個人都對 axios 的使用有一個大致的瞭解了。下面，我們將根據模塊分析 axios 的設計和實現。下面的圖片，是我在本文中會介紹到的源代碼文件。如果您感興趣，最好在閱讀時克隆相關的代碼，這能加深你對相關模塊的理解。
HTTP 請求模塊
請求模塊的代碼放在了 core/dispatchRequest.js 文件中，這裡我只展示了一些關鍵代碼來簡單說明：
module.exports = function dispatchRequest(config) {
throwIfCancellationRequested(config);
var adapter = config.adapter || defaults.adapter;
return adapter(config).then(function onAdapterResolution(response) {
throwIfCancellationRequested(config);
return response;
}, function onAdapterRejection(reason) {
if (!isCancel(reason)) {
throwIfCancellationRequested(config);
return Promise.reject(reason);
});
};上面的代碼中，我們能夠知道 dispatchRequest 方法是通過 config.adapter ，獲得發送請求模塊的。我們還可以通過傳遞，符合規範的適配器函數來替代原來的模塊（一般來說，我們不會這樣做，但它是一個鬆散耦合的擴展點）。
在 defaults.js 文件中，我們可以看到相關適配器的選擇邏輯——根據當前容器的一些獨特屬性和構造函數，來確定使用哪個適配器。
function getDefaultAdapter() {
var adapter;
if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
adapter = require('./adapters/http');
} else if (typeof XMLHttpRequest !== 'undefined') {
adapter = require('./adapters/xhr');
}
return adapter;
}axios 中的 XHR 模塊相對簡單，它是對 XMLHTTPRequest 對象的封裝，這裡我就不再解釋了。有興趣的同學，可以自己閱讀源源碼看看，源碼位於 adapters/xhr.js
攔截器模塊
現在讓我們看看 axios 是如何處理，請求和響應攔截器函數的。這就涉及到了 axios 中的統一接口 ——request 函數。
Axios.prototype.request = function request(config) {
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;
};這個函數是 axios 發送請求的接口。因為函數實現代碼相當長，這裡我會簡單地討論相關設計思想：
- chain 是一個執行隊列。隊列的初始值是一個攜帶配置（config）參數的 Promise 對象。
- 在執行隊列中，初始函數 dispatchRequest 用來發送請求，為了與 dispatchRequest對應，我們添加了一個 undefined。添加 undefined 的原因是需要給 Promise 提供成功和失敗的回調函數，從下面代碼裡的 promise = promise.then(chain.shift(), chain.shift()); 我們就能看出來。因此，函數 dispatchRequest 和 undefiend 可以看成是一對函數。
- 在執行隊列 chain 中，發送請求的 dispatchReqeust 函數處於中間位置。它前面是請求攔截器，使用 unshift 方法插入；它後面是響應攔截器，使用 push 方法插入，在 dispatchRequest 之後。需要注意的是，這些函數都是成對的，也就是一次會插入兩個。
瀏覽上面的 request 函數代碼，我們大致知道了怎樣使用攔截器。下一步，來看看怎樣撤銷一個 HTTP 請求。
撤銷請求模塊
與撤銷請求相關的模塊位於 Cancel/ 文件夾下，現在我們來看下相關核心代碼。
首先，我們來看下基礎 Cancel 類。它是一個用來記錄撤銷狀態的類，具體代碼如下：
function Cancel(message) {
this.message = message;
}
Cancel.prototype.toString = function toString() {
return 'Cancel' + (this.message ? ': ' + this.message : '');
};
Cancel.prototype.__CANCEL__ = true;使用 CancelToken 類時，需要向它傳遞一個 Promise 方法，用來實現 HTTP 請求的撤銷，具體代碼如下：
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.source = function source() {
var cancel;
var token = new CancelToken(function executor(c) {
cancel = c;
});
return {
token: token,
cancel: cancel
};
};adapters/xhr.js 文件中，撤銷請求的地方是這樣寫的：
if (config.cancelToken) {
config.cancelToken.promise.then(function onCanceled(cancel) {
if (!request) {
return;
}
request.abort();
reject(cancel);
request = null;
});
}通過上面的撤銷 HTTP請求的例子，讓我們簡要地討論一下相關的實現邏輯：
- 在需要撤銷的請求中，調用 CancelToken 類的 source 方法類進行初始化，會得到一個包含 CancelToken 類實例 A 和 cancel 方法的對象。
- 當 source 方法正在返回實例 A 的時候，一個處於 pending 狀態的 promise 對象初始化完成。在將實例 A 傳遞給 axios 之後，promise 就可以作為撤銷請求的觸發器使用了。
- 當調用通過 source 方法返回的 cancel 方法後，實例 A 中 promise 狀態從 pending 變成 fulfilled，然後立即觸發 then 回調函數。於是 axios 的撤銷方法——request.abort() 被觸發了。
axios 這樣設計的好處是什麼？
發送請求函數的處理邏輯
如前幾章所述，axios 不將用來發送請求的 dispatchRequest 函數看做一個特殊函數。實際上，dispatchRequest 會被放在隊列的中間位置，以便保證隊列處理的一致性和代碼的可讀性。
適配器的處理邏輯
在適配器的處理邏輯上，http 和 xhr 模塊（一個是在 Node.js 中用來發送請求的，一個是在瀏覽器裡用來發送請求的）並沒有在 dispatchRequest 函數中使用，而是各自作為單獨的模塊，默認通過 defaults.js 文件中的配置方法引入的。因此，它不僅確保了兩個模塊之間的低耦合，而且還為將來的用戶提供了定製請求發送模塊的空間。
撤銷 HTTP 請求的邏輯
在撤銷 HTTP 請求的邏輯中，axios 設計使用 Promise 來作為觸發器，將 resolve 函數暴露在外面，並在回調函數里使用。它不僅確保了內部邏輯的一致性，而且還確保了在需要撤銷請求時，不需要直接更改相關類的樣例數據，以避免在很大程度上入侵其他模塊。
閱讀更多 真致信息技術 的文章
