首頁>技術>

前端開發中,經常會遇到傳送非同步請求的場景。一個功能齊全的 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 的用法與 jQuery 的 ajax 方法非常類似,兩者都返回一個 Promise 物件(在這裡也可以使用成功回撥函式,但還是更推薦使用 Promise 或 await),然後再進行後續操作。

這個例項很簡單,不需要我解釋了。我們再來看看如何新增一個攔截器函式。

從上面的程式碼,我們可以知道:傳送請求之前,我們可以對請求的配置引數(config)做處理;在請求得到響應之後,我們可以對返回資料做處理。當請求或響應失敗時,我們還能指定對應的錯誤處理函式。

撤銷 HTTP 請求

在開發與搜尋相關的模組時,我們經常要頻繁地傳送資料查詢請求。一般來說,當我們傳送下一個請求時,需要撤銷上個請求。因此,能撤銷相關請求功能非常有用。axios 撤銷請求的示例程式碼如下:

從上例中可以看到,在 axios 中,使用基於 CancelToken 的撤銷請求方案。然而,該提案現已撤回,詳情如 點這裡。具體的撤銷請求的實現方法,將在後面的原始碼分析的中解釋。

axios 核心模組的設計和實現

通過上面的例子,我相信每個人都對 axios 的使用有一個大致的了解了。下面,我們將根據模組分析 axios 的設計和實現。下面的圖片,是我在本文中會介紹到的原始碼檔案。如果您感興趣,最好在閱讀時克隆相關的程式碼,這能加深你對相關模組的理解。

HTTP 請求模組

請求模組的程式碼放在了 core/dispatchRequest.js 檔案中,這裡我只展示了一些關鍵程式碼來簡單說明:

上面的程式碼中,我們能夠知道 dispatchRequest 方法是通過 config.adapter ,獲得傳送請求模組的。我們還可以通過傳遞,符合規範的介面卡函式來替代原來的模組(一般來說,我們不會這樣做,但它是一個鬆散耦合的擴充套件點)。

在 defaults.js 檔案中,我們可以看到相關介面卡的選擇邏輯——根據當前容器的一些獨特屬性和建構函式,來確定使用哪個介面卡。

axios 中的 XHR 模組相對簡單,它是對 XMLHTTPRequest 物件的封裝,這裡我就不再解釋了。有興趣的同學,可以自己閱讀源原始碼看看,原始碼位於 adapters/xhr.js 檔案中。

攔截器模組

現在讓我們看看 axios 是如何處理,請求和響應攔截器函式的。這就涉及到了 axios 中的統一介面 ——request 函式

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 類。它是一個用來記錄撤銷狀態的類,具體程式碼如下:

使用 CancelToken 類時,需要向它傳遞一個 Promise 方法,用來實現 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 函式暴露在外面,並在回撥函式裡使用。它不僅確保了內部邏輯的一致性,而且還確保了在需要撤銷請求時,不需要直接更改相關類的樣例資料,以避免在很大程度上入侵其他模組。

總結

本文詳細介紹了 axios 的用法、設計思想和實現方法。在閱讀之後,您可以了解 axios 的設計,並了解模組的封裝和互動。

本文只介紹了 axios 的核心模組,如果你對其他模組程式碼感興趣,可以到 GitHub 上檢視。

(完)

連結:https://juejin.im/post/5d906269f265da5ba7451b02

最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 微服務閘道器除了zuul、spring cloud gateway還有更出色的