本文是 Axios 四部曲的最後一篇文章，這篇文章将介紹在 Axios 中如何通過 增強預設擴充卡 來緩存請求資料。那麼為什麼要緩存請求資料呢？這是因為在緩存未失效時，我們可以直接使用已緩存的資料，而不需發起請求從服務端擷取資料，這樣不僅可以減少 HTTP 請求而且還能減少等待時間進而提高使用者體驗。
這篇文章。為了讓大家能夠更好地了解後續的内容，我們先來看一下整體的流程圖：
上圖中藍色部分的工作流程，就是本文的重點。接下來，阿寶哥将從如何設計緩存開始，帶大家一起來開發緩存請求資料的功能。
在計算中，緩存是一個高速資料存儲層，其中存儲了資料子集，且通常是 短暫性 存儲，這樣日後再次請求該資料時，速度要比通路資料的主存儲位置快。通過緩存，你可以高效地重用之前檢索或計算的資料。了解完緩存的作用之後，我們來設計緩存的 API：
get(key)：從緩存中擷取指定 key 對應的值；
delete(key)：從緩存中删除指定 key 對應的值；
clear()：清空已緩存的資料；
set(key, value, maxAge)：儲存鍵值對，同時支援設定緩存的最大時間，即 maxAge 機關為毫秒。
基于上述的緩存 API，我們可以實作一個簡單的緩存功能，具體代碼如下所示：
其實除了自定義緩存對象之外，你也可以使用成熟的第三方庫，比如 lru-cache。
LRU 緩存淘汰算法就是一種常用政策。LRU 的全稱是 Least Recently Used，也就是說我們認為最近使用過的資料應該是是「有用的」，很久都沒用過的資料應該是無用的，記憶體滿了就優先删那些很久沒用過的資料。
Axios 引入了擴充卡，使得它可以同時支援浏覽器和 Node.js 環境。對于浏覽器環境來說，它通過封裝 XMLHttpRequest API 來發送 HTTP 請求，而對于 Node.js 環境來說，它通過封裝 Node.js 内置的 http 和 https 子產品來發送 HTTP 請求。
在介紹如何增強預設擴充卡之前，我們先來回顧一下 Axios 完整請求的流程：
了解完 Axios 完整請求的流程之後，我們再來看一下 Axios 内置的 xhrAdapter 擴充卡，它被定義在 lib/adapters/xhr.js 檔案中：
很明顯 xhrAdapter 擴充卡是一個函數對象，它接收一個 config 參數并傳回一個 Promise 對象。而在 xhrAdapter 擴充卡内部，最終會使用 XMLHttpRequest API 來發送 HTTP 請求。為了實作緩存請求資料的功能，我們就可以考慮通過高階函數來增強 xhrAdapter 擴充卡的功能。
關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書（累計下載下傳 3萬+）及 50 幾篇 TS 系列教程。
2.1.1 定義 generateReqKey 函數
在增強 xhrAdapter 擴充卡之前，我們先來定義一個 generateReqKey 函數，該函數用于根據目前請求的資訊，生成請求 Key；
通過 generateReqKey 函數生成的請求 key，将作為緩存項的 key，而對應的 value 就是預設 xhrAdapter 擴充卡傳回的 Promise 對象。
2.1.2 定義 isCacheLike 函數
isCacheLike 函數用于判斷傳入的 cache 參數是否實作了前面定義的 Cache API，利用該函數，我們允許使用者為每個請求自定義 Cache 對象。
為了讓使用者能夠更靈活地控制資料緩存的功能，我們定義了一個 cacheAdapterEnhancer 函數，該函數支援兩個參數：
adapter：預增強的 Axios 擴充卡對象；
options：緩存配置對象，該對象支援 4 個屬性，分别用于配置不同的功能：
maxAge：全局設定緩存的最大時間；
enabledByDefault：是否啟用緩存，預設為 true；
cacheFlag：緩存标志，用于配置請求 config 對象上的緩存屬性；
defaultCache：用于設定使用的緩存對象。
了解完 cacheAdapterEnhancer 函數的參數之後，我們來看一下該函數的具體實作：
以上的代碼并不會複雜，核心的處理邏輯如下圖所示：
2.3.1 建立 Axios 對象并配置 adapter 選項
2.3.2 使用 http 對象發送請求
其實 cache 屬性除了支援布爾值之外，我們可以配置實作 Cache API 的緩存對象，具體的使用示例如下所示：
好了，如何通過增強 xhrAdapter 擴充卡來實作 Axios 緩存請求資料的功能已經介紹完了。由于完整的示例代碼内容比較多，阿寶哥就不放具體的代碼了。感興趣的小夥伴，可以通路以下位址浏覽示例代碼。
完整的示例代碼： http://github.crmeb.net/u/defu
本文介紹了在 Axios 中如何緩存請求資料及如何設計緩存對象，基于文中定義的 cacheAdapterEnhancer 函數，你可以輕松地擴充緩存的功能。至此 Axios 四部曲已經全部更新完成了，以下是其他文章的連結，感興趣的小夥伴可以了解一下。寫得不好的地方，請多多包涵。