[[392358]]

本文轉(zhuǎn)載自微信公眾號(hào)「全棧修仙之路」，作者阿寶哥。轉(zhuǎn)載本文請(qǐng)聯(lián)系全棧修仙之路公眾號(hào)。  

在 Axios 如何取消重復(fù)請(qǐng)求? 這篇文章中，阿寶哥介紹了在 Axios 中如何取消重復(fù)請(qǐng)求及 CancelToken 的工作原理。本文將介紹在 Axios 中如何通過(guò)增強(qiáng)默認(rèn)適配器來(lái)緩存請(qǐng)求數(shù)據(jù)。那么為什么要緩存請(qǐng)求數(shù)據(jù)呢?這是因?yàn)樵诰彺嫖词r(shí)，我們可以直接使用已緩存的數(shù)據(jù)，而不需發(fā)起請(qǐng)求從服務(wù)端獲取數(shù)據(jù)，這樣不僅可以減少 HTTP 請(qǐng)求而且還能減少等待時(shí)間從而提高用戶體驗(yàn)。

因?yàn)楸疚膶⑹褂?Axios 提供的默認(rèn)適配器來(lái)實(shí)現(xiàn)緩存請(qǐng)求數(shù)據(jù)的功能，所以如果你對(duì) Axios 適配器還不熟悉的話，建議先閱讀 77.9K 的 Axios 項(xiàng)目有哪些值得借鑒的地方 這篇文章。為了讓大家能夠更好地理解后續(xù)的內(nèi)容，我們先來(lái)看一下整體的流程圖：

上圖中藍(lán)色部分的工作流程，就是本文的重點(diǎn)。接下來(lái)，阿寶哥將從如何設(shè)計(jì)緩存開(kāi)始，帶大家一起來(lái)開(kāi)發(fā)緩存請(qǐng)求數(shù)據(jù)的功能。

一、如何設(shè)計(jì)緩存

在計(jì)算中，緩存是一個(gè)高速數(shù)據(jù)存儲(chǔ)層，其中存儲(chǔ)了數(shù)據(jù)子集，且通常是 短暫性 存儲(chǔ)，這樣日后再次請(qǐng)求該數(shù)據(jù)時(shí)，速度要比訪問(wèn)數(shù)據(jù)的主存儲(chǔ)位置快。通過(guò)緩存，你可以高效地重用之前檢索或計(jì)算的數(shù)據(jù)。了解完緩存的作用之后，我們來(lái)設(shè)計(jì)緩存的 API：

• get(key)：從緩存中獲取指定 key 對(duì)應(yīng)的值;
• delete(key)：從緩存中刪除指定 key 對(duì)應(yīng)的值;
• clear()：清空已緩存的數(shù)據(jù);
• set(key, value, maxAge)：保存鍵值對(duì)，同時(shí)支持設(shè)置緩存的最大時(shí)間，即 maxAge 單位為毫秒。

基于上述的緩存 API，我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的緩存功能，具體代碼如下所示：

const MemoryCache = { 
  data: {}, 
  set(key, value, maxAge) { // 保存數(shù)據(jù) 
    this.data[key] = { 
      maxAge: maxAge || 0, 
      value, 
      now: Date.now(), 
     }; 
  }, 
  get(key) { // 從緩存中獲取指定 key 對(duì)應(yīng)的值。 
    const cachedItem = this.data[key]; 
    if (!cachedItem) return null; 
    const isExpired = Date.now() - cachedItem.now > cachedItem.maxAge; 
    isExpired && this.delete(key); 
    return isExpired ? null : cachedItem.value; 
  }, 
  delete(key) { // 從緩存中刪除指定 key 對(duì)應(yīng)的值。 
    return delete this.data[key]; 
  }, 
  clear() { // 清空已緩存的數(shù)據(jù)。 
    this.data = {}; 
  }, 
}; 

其實(shí)除了自定義緩存對(duì)象之外，你也可以使用成熟的第三方庫(kù)，比如 lru-cache。

LRU 緩存淘汰算法就是一種常用策略。LRU 的全稱是 Least Recently Used，也就是說(shuō)我們認(rèn)為最近使用過(guò)的數(shù)據(jù)應(yīng)該是是「有用的」，很久都沒(méi)用過(guò)的數(shù)據(jù)應(yīng)該是無(wú)用的，內(nèi)存滿了就優(yōu)先刪那些很久沒(méi)用過(guò)的數(shù)據(jù)。

二、如何增強(qiáng)默認(rèn)適配器

Axios 引入了適配器，使得它可以同時(shí)支持瀏覽器和 Node.js 環(huán)境。對(duì)于瀏覽器環(huán)境來(lái)說(shuō)，它通過(guò)封裝 XMLHttpRequest API 來(lái)發(fā)送 HTTP 請(qǐng)求，而對(duì)于 Node.js 環(huán)境來(lái)說(shuō)，它通過(guò)封裝 Node.js 內(nèi)置的 http 和 https 模塊來(lái)發(fā)送 HTTP 請(qǐng)求。

在介紹如何增強(qiáng)默認(rèn)適配器之前，我們先來(lái)回顧一下 Axios 完整請(qǐng)求的流程：

了解完 Axios 完整請(qǐng)求的流程之后，我們?cè)賮?lái)看一下 Axios 內(nèi)置的 xhrAdapter 適配器，它被定義在 lib/adapters/xhr.js 文件中：

// lib/adapters/xhr.js 
module.exports = function xhrAdapter(config) { 
  return new Promise(function dispatchXhrRequest(resolve, reject) { 
    var requestData = config.data; 
    var requestHeaders = config.headers; 
 
    var request = new XMLHttpRequest(); 
    // 省略大部分代碼 
    var fullPath = buildFullPath(config.baseURL, config.url); 
    request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true); 
    // Set the request timeout in MS 
    request.timeout = config.timeout; 
 
    // Listen for ready state 
    request.onreadystatechange = function handleLoad() { ... } 
 
    // Send the request 
    request.send(requestData); 
  }); 
}; 

很明顯 xhrAdapter 適配器是一個(gè)函數(shù)對(duì)象，它接收一個(gè) config 參數(shù)并返回一個(gè) Promise 對(duì)象。而在 xhrAdapter 適配器內(nèi)部，最終會(huì)使用 XMLHttpRequest API 來(lái)發(fā)送 HTTP 請(qǐng)求。為了實(shí)現(xiàn)緩存請(qǐng)求數(shù)據(jù)的功能，我們就可以考慮通過(guò)高階函數(shù)來(lái)增強(qiáng) xhrAdapter 適配器的功能。

2.1 定義輔助函數(shù)

2.1.1 定義 generateReqKey 函數(shù)

在增強(qiáng) xhrAdapter 適配器之前，我們先來(lái)定義一個(gè) generateReqKey 函數(shù)，該函數(shù)用于根據(jù)當(dāng)前請(qǐng)求的信息，生成請(qǐng)求 Key;

function generateReqKey(config) { 
  const { method, url, params, data } = config; 
  return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&"); 
} 

通過(guò) generateReqKey 函數(shù)生成的請(qǐng)求 key，將作為緩存項(xiàng)的 key，而對(duì)應(yīng)的 value 就是默認(rèn) xhrAdapter 適配器返回的 Promise 對(duì)象。

2.1.2 定義 isCacheLike 函數(shù)

isCacheLike 函數(shù)用于判斷傳入的 cache 參數(shù)是否實(shí)現(xiàn)了前面定義的 Cache API，利用該函數(shù)，我們?cè)试S用戶為每個(gè)請(qǐng)求自定義 Cache 對(duì)象。

function isCacheLike(cache) { 
 return !!(cache.set && cache.get && cache.delete && cache.clear   
  && typeof cache.get === 'function' && typeof cache.set === 'function'  
    && typeof cache.delete === 'function' && typeof cache.clear === 'function' 
  ); 
} 

2.2 定義 cacheAdapterEnhancer 函數(shù)

為了讓用戶能夠更靈活地控制數(shù)據(jù)緩存的功能，我們定義了一個(gè) cacheAdapterEnhancer 函數(shù)，該函數(shù)支持兩個(gè)參數(shù)：

adapter：預(yù)增強(qiáng)的 Axios 適配器對(duì)象;

options：緩存配置對(duì)象，該對(duì)象支持 4 個(gè)屬性，分別用于配置不同的功能：

maxAge：全局設(shè)置緩存的最大時(shí)間;

enabledByDefault：是否啟用緩存，默認(rèn)為 true;

cacheFlag：緩存標(biāo)志，用于配置請(qǐng)求 config 對(duì)象上的緩存屬性;

defaultCache：用于設(shè)置使用的緩存對(duì)象。

了解完 cacheAdapterEnhancer 函數(shù)的參數(shù)之后，我們來(lái)看一下該函數(shù)的具體實(shí)現(xiàn)：

function cacheAdapterEnhancer(adapter, options) { 
  const { maxAge, enabledByDefault = true, 
    cacheFlag = "cache", defaultCache = MemoryCache, 
  } = options; 
   
  return (config) => { 
    const { url, method, params, forceUpdate } = config; 
    let useCache = config[cacheFlag] !== undefined && config[cacheFlag] !== null 
        ? config[cacheFlag] 
        : enabledByDefault; 
      if (method === "get" && useCache) { 
        const cache = isCacheLike(useCache) ? useCache : defaultCache; 
        let requestKey = generateReqKey(config);  // 生成請(qǐng)求Key 
        let responsePromise = cache.get(requestKey); // 從緩存中獲取請(qǐng)求key對(duì)應(yīng)的響應(yīng)對(duì)象 
        if (!responsePromise || forceUpdate) { // 緩存未命中/失效或強(qiáng)制更新時(shí)，則重新請(qǐng)求數(shù)據(jù) 
           responsePromise = (async () => { 
             try { 
               return await adapter(config);  // 使用默認(rèn)的xhrAdapter發(fā)送請(qǐng)求 
             } catch (reason) { 
                 cache.delete(requestKey); 
                 throw reason; 
                } 
           })(); 
           cache.set(requestKey, responsePromise, maxAge);  // 保存請(qǐng)求返回的響應(yīng)對(duì)象 
           return responsePromise; // 返回已保存的響應(yīng)對(duì)象 
       } 
       return responsePromise; 
     } 
     return adapter(config); // 使用默認(rèn)的xhrAdapter發(fā)送請(qǐng)求 
   }; 
} 

以上的代碼并不會(huì)復(fù)雜，核心的處理邏輯如下圖所示：

2.3 使用 cacheAdapterEnhancer 函數(shù)

2.3.1 創(chuàng)建 Axios 對(duì)象并配置 adapter 選項(xiàng)

const http = axios.create({ 
  baseURL: "https://jsonplaceholder.typicode.com", 
  adapter: cacheAdapterEnhancer(axios.defaults.adapter, { 
    enabledByDefault: false, // 默認(rèn)禁用緩存 
    maxAge: 5000, // 緩存時(shí)間為5s 
  }), 
}); 

2.3.2 使用 http 對(duì)象發(fā)送請(qǐng)求

// 使用緩存 
async function requestWithCache() { 
  const response = await http.get("/todos/1", { cache: true }); 
  console.dir(response); 
} 
 
// 不使用緩存 
async function requestWithoutCache() { 
  const response = await http.get("/todos/1", { cache: false }); 
  console.dir(response); 
} 

其實(shí) cache 屬性除了支持布爾值之外，我們可以配置實(shí)現(xiàn) Cache API 的緩存對(duì)象，具體的使用示例如下所示：

const customCache = { get() {/*...*/}, set() {/*...*/}, delete() {/*...*/}, clear() {/*...*/}}; 
       
async function requestForceUpdate() { 
  const response = await http.get("/todos/1", { 
    cache: customCache, 
    forceUpdate: true, 
  }); 
  console.dir(response); 
} 

好了，如何通過(guò)增強(qiáng) xhrAdapter 適配器來(lái)實(shí)現(xiàn) Axios 緩存請(qǐng)求數(shù)據(jù)的功能已經(jīng)介紹完了。由于完整的示例代碼內(nèi)容比較多，阿寶哥就不放具體的代碼了。感興趣的小伙伴，可以訪問(wèn)以下地址瀏覽示例代碼。

完整的示例代碼：https://gist.github.com/semlinker/b8a7bd5a0a16c2d04011c2c4a8167fbd

三、總結(jié)

本文介紹了在 Axios 中如何緩存請(qǐng)求數(shù)據(jù)及如何設(shè)計(jì)緩存對(duì)象，基于文中定義的 cacheAdapterEnhancer 函數(shù)，你可以輕松地?cái)U(kuò)展緩存的功能。在后續(xù)的文章中，阿寶哥將會(huì)介紹在 Axios 中如何實(shí)現(xiàn)請(qǐng)求重試功能，感興趣的小伙伴不要錯(cuò)過(guò)喲。