當(dāng)前位置：首頁 > 科技 > 軟件

Axios 跨端架構(gòu)是如何實現(xiàn)的？

來源：責(zé)編：時間：2024-05-07 09:15:51 214觀看

導(dǎo)讀我們都知道，axios 是是一個跨平臺請求方案，在瀏覽器端采用 XMLHttpRequest API 進(jìn)行封裝，而在 Node.js 端則采用 http/https 模塊進(jìn)行封裝。axios 內(nèi)部采用適配器模式將二者合二為一，在隱藏了底層的實現(xiàn)的同時，又對外開放

我們都知道，axios 是是一個跨平臺請求方案，在瀏覽器端采用 XMLHttpRequest API 進(jìn)行封裝，而在 Node.js 端則采用 http/https 模塊進(jìn)行封裝。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#L38async 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-L173try {  promise = dispatchRequest.call(this, newConfig);} catch (error) {  return Promise.reject(error);}

dispatchRequest() 是實際調(diào)用請求的地方，而實際調(diào)用是采用 XMLHttpRequest API（瀏覽器）還是http/https 模塊（Node.js），則需要進(jìn)一步查看。

// /v1.6.8/lib/core/dispatchRequest.js#L34export default function dispatchRequest(config) { /* ... */ }

dispatchRequest() 接收的是上一步合并之后的 config 參數(shù)，有了這個參數(shù)我們就可以發(fā)送請求了。

跨端適配實現(xiàn)

// /v1.6.8/lib/core/dispatchRequest.js#L49const 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#L40adapter: ['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-L9import 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-L75export 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#L28adapters = Array.isArray(adapters) ? adapters : [adapters];

2）接下來，就是遍歷 adapters 找到要用的那個適配器。

到目前為止，adapters[i]（也就是下面的 nameOrAdapter）既可能是字符串（'xhr'、'http'），也可能是函數(shù)（function (config) {}）。

// /v1.6.8/lib/adapters/adapters.js#L37let nameOrAdapter = adapters[i];adapter = nameOrAdapter;

3）那么，我們還要檢查 nameOrAdapter 的類型。

// /v1.6.8/lib/adapters/adapters.js#L42-L48if (!isResolvedHandle(nameOrAdapter)) {  adapter = knownAdapters[(id = String(nameOrAdapter)).toLowerCase()];}

isResolvedHandle() 是一個工具函數(shù)，其目的是為了判斷是否要從 knownAdapters 獲取適配器。

// /v1.6.8/lib/adapters/adapters.js#L24const 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#L48const isXHRAdapterSupported = typeof XMLHttpRequest !== 'undefined';export default isXHRAdapterSupported && function (config) {/* ...*/}// /v1.6.8/lib/adapters/http.js#L160const 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

本文鏈接：http://www.tebozhan.com/showinfo-26-87048-0.htmlAxios 跨端架構(gòu)是如何實現(xiàn)的？

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：盤點Lombok的幾個操作，你記住了嗎？

下一篇： Python 網(wǎng)絡(luò)爬蟲利器：執(zhí)行 JavaScript 實現(xiàn)數(shù)據(jù)抓取

標(biāo)簽：

熱門焦點

6月iOS設(shè)備好評榜：第一蟬聯(lián)榜首近一年

作為安兔兔各種榜單里變化最小的那個，2023年6月的iOS好評榜和上個月相比沒有任何排名上的變化，僅僅是部分設(shè)備好評率的下降，長年累月的用戶評價和逐漸退出市場的老款機器讓這
三言兩語說透設(shè)計模式的藝術(shù)-單例模式

寫在前面單例模式是一種常用的軟件設(shè)計模式，它所創(chuàng)建的對象只有一個實例，且該實例易于被外界訪問。單例對象由于只有一個實例，所以它可以方便地被系統(tǒng)中的其他對象共享，從而減少
之家push系統(tǒng)迭代之路

前言在這個信息爆炸的互聯(lián)網(wǎng)時代，能夠及時準(zhǔn)確獲取信息是當(dāng)今社會要解決的關(guān)鍵問題之一。隨著之家用戶體量和內(nèi)容規(guī)模的不斷增大，傳統(tǒng)的靠"主動拉"獲取信息的方式已不能滿足用
從零到英雄：高并發(fā)與性能優(yōu)化的神奇之旅

作者 | 波哥審校 | 重樓作為公司的架構(gòu)師或者程序員，你是否曾經(jīng)為公司的系統(tǒng)在面對高并發(fā)和性能瓶頸時感到手足無措或者焦頭爛額呢？筆者在出道那會為此是吃盡了苦頭的，不過也得
Python異步IO編程的進(jìn)程/線程通信實現(xiàn)

這篇文章再講3種方式，同時講4中進(jìn)程間通信的方式一、 Python 中線程間通信的實現(xiàn)方式共享變量共享變量是多個線程可以共同訪問的變量。在Python中，可以使用threading模塊中的L
東方甄選單飛：有些鳥注定是關(guān)不住的

作者：彭寬鴻來源：華爾街科技眼&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;東方甄選創(chuàng)始人俞敏洪帶隊的“7天甘肅行”直播活動已在近日順利收官。成立后一
三星電子Q2營收60萬億韓元存儲業(yè)務(wù)營收同比仍下滑超過50%

7月27日消息，據(jù)外媒報道，從三星電子所發(fā)布的財報來看，他們主要利潤來源的存儲芯片業(yè)務(wù)在今年二季度仍不樂觀，營收同比仍在大幅下滑，所在的設(shè)備解決方案
超閉合精工鉸鏈徹底消滅縫隙三星Galaxy Z Flip5與Galaxy Z Fold5發(fā)布

2023年7月26日，三星電子正式發(fā)布了Galaxy Z Flip5與Galaxy Z Fold5。三星新一代折疊屏手機采用超閉合精工鉸鏈，讓折疊后的縫隙不再可見。同時，配合處
世界人工智能大會國際日開幕式活動在世博展覽館開啟

30日上午，世界人工智能大會國際日開幕式活動在世博展覽館開啟，聚集國際城市代表、重量級院士專家、國際創(chuàng)新企業(yè)代表，共同打造人工智能交流平臺。上海市副市

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

Axios 跨端架構(gòu)是如何實現(xiàn)的？

從 axios 發(fā)送請求說起

dispatchRequest() 方法

跨端適配實現(xiàn)

defaults.adapter

適配器實現(xiàn)

總結(jié)

參考資料

6月iOS設(shè)備好評榜：第一蟬聯(lián)榜首近一年

三言兩語說透設(shè)計模式的藝術(shù)-單例模式

之家push系統(tǒng)迭代之路

從零到英雄：高并發(fā)與性能優(yōu)化的神奇之旅

Python異步IO編程的進(jìn)程/線程通信實現(xiàn)

東方甄選單飛：有些鳥注定是關(guān)不住的

三星電子Q2營收60萬億韓元存儲業(yè)務(wù)營收同比仍下滑超過50%

超閉合精工鉸鏈徹底消滅縫隙三星Galaxy Z Flip5與Galaxy Z Fold5發(fā)布

世界人工智能大會國際日開幕式活動在世博展覽館開啟

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊