Axios 跨端架構(gòu)是如何實現(xiàn)的？
我們都知道，axios 是是一個跨平臺請求方案，在瀏覽器端采用 XMLHttpRequest API 進行封裝，而在 Node.js 端則采用 http/https 模塊進行封裝。axios 內(nèi)部采用適配器模式將二者合二為一，在隱藏了底層的實現(xiàn)的同時，又對外開放了一套統(tǒng)一的開放接口。
那么本文，我們將來探討這個話題：axios 的跨端架構(gòu)是如何實現(xiàn)的？
從 axios 發(fā)送請求說起
我們先來看看 axios 是如何發(fā)送請求的。
// 發(fā)送一個 GET 請求
axios({
method: 'get',
url: 'https://jsonplaceholder.typicode.com/comments'
params: { postId: 1 }
})
// 發(fā)送一個 POST 請求
axios({
method: 'post'
url: 'https://jsonplaceholder.typicode.com/posts',
data: {
title: 'foo',
body: 'bar',
userId: 1,
}
})dispatchRequest() 方法
當(dāng)使用 axios 請求時，實際上內(nèi)部是由 Axios[3] 實例的 .request() 方法處理的。
// /v1.6.8/lib/core/Axios.js#L38
async request(configOrUrl, config) {
try {
return await this._request(configOrUrl, config);
} catch (err) {}
}而 ._request() 方法內(nèi)部會先將 configOrUrl, config 2 個參數(shù)處理成 config 參數(shù)。
// /v1.6.8/lib/core/Axios.js#L62
_request(configOrUrl, config) {
if (typeof configOrUrl === 'string') {
config = config || {};
config.url = configOrUrl;
} else {
config = configOrUrl || {};
}
// ...
}這里是為了同時兼容下面 2 種調(diào)用方法。
// 調(diào)用方式一
axios('https://jsonplaceholder.typicode.com/posts/1')
// 調(diào)用方式二
axios({
method: 'get',
url: 'https://jsonplaceholder.typicode.com/posts/1'
})當(dāng)然，這不是重點。在 ._request() 方法內(nèi)部請求最終會交由 dispatchRequest() 處理。
// /v1.6.8/lib/core/Axios.js#L169-L173
try {
promise = dispatchRequest.call(this, newConfig);
} catch (error) {
return Promise.reject(error);
}dispatchRequest() 是實際調(diào)用請求的地方，而實際調(diào)用是采用 XMLHttpRequest API（瀏覽器）還是http/https 模塊（Node.js），則需要進一步查看。
// /v1.6.8/lib/core/dispatchRequest.js#L34
export default function dispatchRequest(config) { /* ... */ }dispatchRequest() 接收的是上一步合并之后的 config 參數(shù)，有了這個參數(shù)我們就可以發(fā)送請求了。
跨端適配實現(xiàn)
// /v1.6.8/lib/core/dispatchRequest.js#L49
const adapter = adapters.getAdapter(config.adapter || defaults.adapter);這里就是我們所說的 axios 內(nèi)部所使用的適配器模式了。
axios 支持從外出傳入 adapter 參數(shù)支持自定義請求能力的實現(xiàn)，不過很少使用。大部分請求下，我們都是使用內(nèi)置的適配器實現(xiàn)。
defaults.adapter
defaults.adapter 的值如下：
// /v1.6.8/lib/defaults/index.js#L40
adapter: ['xhr', 'http'],adapters.getAdapter(['xhr', 'http']) 又是在做什么事情呢？
適配器實現(xiàn)
首先，adapters 位于 lib/adapters/adapters.js[4]。
所屬的目錄結(jié)構(gòu)如下：
圖片
可以看到針對瀏覽器和 Node.js 2 個環(huán)境的適配支持：http.js、xhr.js。
adapters 的實現(xiàn)如下。
首先，將內(nèi)置的 2 個適配文件引入。
// /v1.6.8/lib/adapters/adapters.js#L2-L9
import httpAdapter from './http.js';
import xhrAdapter from './xhr.js';
const knownAdapters = {
http: httpAdapter,
xhr: xhrAdapter
}knownAdapters 的屬性名正好是和 defaults.adapter 的值 ['xhr', 'http'] 是一一對應(yīng)的。
而 adapters.getAdapter(['xhr', 'http']) 的實現(xiàn)是這樣的：
// /v1.6.8/lib/adapters/adapters.js#L27-L75
export default {
getAdapter: (adapters) => {
// 1)
adapters = Array.isArray(adapters) ? adapters : [adapters];
let nameOrAdapter;
let adapter;
// 2)
for (let i = 0; i < adapters.length; i++) {
nameOrAdapter = adapters[i];
adapter = nameOrAdapter;
// 3)
if (!isResolvedHandle(nameOrAdapter)) {
adapter = knownAdapters[String(nameOrAdapter).toLowerCase()];
}
if (adapter) {
break;
}
}
// 4)
if (!adapter) {
throw new AxiosError(
`There is no suitable adapter to dispatch the request `,
'ERR_NOT_SUPPORT'
);
}
return adapter;
}
}內(nèi)容比較長，我們會按照代碼標(biāo)準(zhǔn)的序號分 4 個部分來講。
1）這里是為了兼容調(diào)用 axios() 時傳入 adapter 參數(shù)的情況。
// `adapter` allows custom handling of requests which makes testing easier.
// Return a promise and supply a valid response (see lib/adapters/README.md).
adapter: function (config) {
/* ... */
},因為接下來 adapters 是作為數(shù)組處理，所以這種場景下，我們將 adapter 封裝成數(shù)組 [adapters]。
// /v1.6.8/lib/adapters/adapters.js#L28
adapters = Array.isArray(adapters) ? adapters : [adapters];2）接下來，就是遍歷 adapters 找到要用的那個適配器。
到目前為止，adapters[i]（也就是下面的 nameOrAdapter）既可能是字符串（'xhr'、'http'），也可能是函數(shù)（function (config) {}）。
// /v1.6.8/lib/adapters/adapters.js#L37
let nameOrAdapter = adapters[i];
adapter = nameOrAdapter;3）那么，我們還要檢查 nameOrAdapter 的類型。
// /v1.6.8/lib/adapters/adapters.js#L42-L48
if (!isResolvedHandle(nameOrAdapter)) {
adapter = knownAdapters[(id = String(nameOrAdapter)).toLowerCase()];
}isResolvedHandle() 是一個工具函數(shù)，其目的是為了判斷是否要從 knownAdapters 獲取適配器。
// /v1.6.8/lib/adapters/adapters.js#L24
const isResolvedHandle = (adapter) => typeof adapter === 'function' || adapter === null || adapter === false;簡單理解，只有 adapter 是字符串的情況（'xhr' 或 'http'），isResolvedHandle(nameOrAdapter) 才返回 false，才從 knownAdapters 獲得適配器。
typeof adapter === 'function' || adapter === null 這個判斷條件我們?nèi)菀桌斫?，這是為了排除自定義 adapter 參數(shù)（傳入函數(shù)或 null）的情況。
而 adapter === false 又是對應(yīng)什么情況呢？
那是因為我們的代碼只可能是在瀏覽器或 Node.js 環(huán)境下運行。這個時候 httpAdapter 和 xhrAdapter 具體返回是有差異的。
// /v1.6.8/lib/adapters/xhr.js#L48
const isXHRAdapterSupported = typeof XMLHttpRequest !== 'undefined';
export default isXHRAdapterSupported && function (config) {/* ...*/}
// /v1.6.8/lib/adapters/http.js#L160
const isHttpAdapterSupported = typeof process !== 'undefined' && utils.kindOf(process) === 'process';
export default isHttpAdapterSupported && function httpAdapter(config) {/* ... */}也就是說：在瀏覽器環(huán)境 httpAdapter 返回 false，xhrAdapter 返回函數(shù)；在 Node.js 環(huán)境 xhrAdapter 返回 false，httpAdapter 返回函數(shù)。
因此，一旦 isResolvedHandle() 邏輯執(zhí)行完成后。
if (!isResolvedHandle(nameOrAdapter)) {/* ... */}會檢查 adapter 變量的值，一旦有值（非 false）就說明找到適配器了，結(jié)束遍歷。
if (adapter) {
break;
}4）最終在返回適配器前做空檢查
// 4)
if (!adapter) {
throw new AxiosError(
`There is no suitable adapter to dispatch the request `,
'ERR_NOT_SUPPORT'
);
}
return adapter;如此，就完成了跨端架構(gòu)的實現(xiàn)。
總結(jié)
本文我們講述了 axios 的跨端架構(gòu)原理。axios 內(nèi)部實際發(fā)出請求是通過 dispatchRequest() 方法處理的，再往里看則是通過適配器模式取得適應(yīng)于當(dāng)前環(huán)境的適配器函數(shù)。
axios 內(nèi)置了 2 個適配器支持：httpAdapter 和 xhrAdapter。httpAdapter 是 Node.js 環(huán)境實現(xiàn)，通過 http/https 模塊；xhrAdapter 這是瀏覽器環(huán)境實現(xiàn)，通過 XMLHttpRequest API 實現(xiàn)。Node.js 環(huán)境 xhrAdapter 返回 false，瀏覽器環(huán)境 httpAdapter 返回 false——這樣總是能返回正確的適配器。
參考資料
[1]axios 是如何實現(xiàn)取消請求的？: https://juejin.cn/post/7359444013894811689
[2]你知道嗎？axios 請求是 JSON 響應(yīng)優(yōu)先的: https://juejin.cn/post/7359580605320036415
[3]Axios: https://github.com/axios/axios/blob/v1.6.8/lib/core/Axios.js
[4]lib/adapters/adapters.js: https://github.com/axios/axios/blob/v1.6.8/lib/adapters/adapters.js
