背景與概念

在進行網(wǎng)絡請求的應用中，尤其是數(shù)據(jù)變化不頻繁的場景下，緩存是一個常用而有效的優(yōu)化手段。緩存可以減少網(wǎng)絡延遲，避免不必要的數(shù)據(jù)傳輸，節(jié)省帶寬，提高用戶體驗。但是，不當?shù)木彺娌呗钥赡軐е掠脩艨吹竭^時的數(shù)據(jù)。因此，實現(xiàn)一個合理的緩存策略是非常重要的。

Promise是JavaScript中處理異步操作的一種模式，它代表一個尚未完成但預計將來會完成的操作。通過Promise，可以將異步操作隊列化，鏈式處理，并在適當?shù)臅r候進行錯誤處理。

緩存網(wǎng)絡請求的需求與挑戰(zhàn)

在許多情況下，當多個組件或者頁面需要相同的數(shù)據(jù)時，每個組件各自發(fā)起網(wǎng)絡請求顯得非常低效。這需要一種機制能夠“共享”已經(jīng)發(fā)起的請求，當請求完成后，所有需要這份數(shù)據(jù)的組件都能獲得到。同時，若數(shù)據(jù)已經(jīng)在本地緩存，則無需重新發(fā)起網(wǎng)絡請求，直接使用緩存數(shù)據(jù)即可。

實現(xiàn)這樣的功能，有如下幾個挑戰(zhàn)：

• 請求的復用性：避免同一數(shù)據(jù)的重復請求。
• 請求的并發(fā)管理：針對相同的數(shù)據(jù)來源同一時間只發(fā)送一次請求。
• 緩存的合理性：緩存有效數(shù)據(jù)，但要避免過時數(shù)據(jù)的問題。
• 緩存的容錯性：當請求失敗時，如何處理以及如何通知依賴這份數(shù)據(jù)的其他部分。

Promise緩存網(wǎng)絡請求的實現(xiàn)

具體到實現(xiàn)，可以創(chuàng)建一個緩存對象，用于存儲已經(jīng)發(fā)起的請求的Promise對象。在請求發(fā)起前，先檢查緩存中是否已存在相應的Promise；如果存在，直接返回該Promise；如果不存在，則發(fā)起新的請求，并將請求的Promise存儲到緩存中。

以下是一個簡化的實現(xiàn)示例，逐一解釋核心代碼：

import utils from '@/utils';

export const reqThenCacheData = (
  name: string
): Promise<void | Promise<utils.ICachedData>> => {
  // 嘗試獲取緩存數(shù)據(jù)
  const cache = utils.cacheForData.get(name);

  // 如果存在緩存，直接返回緩存中的Promise對象 
  if (cache) return cache;

  // 沒有緩存，構(gòu)造請求URL，發(fā)起網(wǎng)絡請求
  const url = `http://*******?name=${name}`;
  const currentHandler = (
    request.get({ url }) as unknown as Promise<Array<utils.ICachedListData>>
  )
    .then((data: Array<utils.ICachedListData>) => {
      // 對返回的數(shù)據(jù)進行處理，得到一個子請求列表
      const subList: Array<string> = data.map((sub) => {
        if (sub.is_default === 1) return sub.subName;
      });
      return subList.filter((item) => item);
    })
    .then((subNames: Array<string>) => {
      // 根據(jù)第一次請求的結(jié)果，構(gòu)建第二次請求的Promise數(shù)組
      const subRequestPromises: Array<Promise<utils.ICachedData>> = subNames.map((subName: string) => {
        const subUrl = `http://*******?subName=${subName}`;
        return request.get({ url: subUrl }) as unknown as Promise<utils.ICachedData>;
      });
      // 使用Promise.all等待所有子請求完成
      return Promise.all(subRequestPromises);
    })
    .then((subData: Array<utils.ICachedData>) => {
      // 可以進一步處理所有子請求的結(jié)果
      // 示例僅返回其中一個子請求結(jié)果
      return subData[0];
    })
    .catch((error) => {
      console.log('請求數(shù)據(jù)失?。?, error);
      // 錯誤處理：可以決定是否從緩存中移除錯誤的Promise
      utils.cacheForData.delete(name);
      // 根據(jù)需要，可以在這里拋出錯誤或返回一個默認值
      throw error;
    });

  // 存入緩存，便于下次直接使用
  utils.cacheForData.set(name, currentHandler);
  return currentHandler;
};

緩存邏輯概述

上述代碼演示了基于Promise的網(wǎng)絡請求緩存機制。首先，通過調(diào)用cacheForData.get(name)嘗試獲取緩存中已存在的請求Promise，如果找到，則直接返回，避免重復請求。

如果緩存中沒有找到請求Promise，那么將發(fā)起一個新的網(wǎng)絡請求。請求返回的Promise通過鏈式的.then()方法進行處理。這些.then()方法負責對返回的數(shù)據(jù)進行處理和轉(zhuǎn)化，使用者可以根據(jù)實際情況添加具體的數(shù)據(jù)處理邏輯。

最后，使用catch()方法處理可能發(fā)生的錯誤，并且將當前請求的Promise對象使用cacheForData.set(name, currentHandler)方法存儲到緩存中，以便后續(xù)重用。

多階段請求處理

上述代碼展示了如何處理一個需要多次網(wǎng)絡請求的場景。系統(tǒng)首先檢查緩存中是否有目標數(shù)據(jù)的Promise，在緩存未命中時，發(fā)起一個初始網(wǎng)絡請求。取得初始數(shù)據(jù)后，提取必要的信息組成新的請求數(shù)組。

利用Promise.all()方法，可以并行處理多個網(wǎng)絡請求，這個方法返回一個新的Promise，它將在所有請求完成時解析。這一過程是Promise緩存實現(xiàn)的核心，它使得各個請求之間可以共享狀態(tài)，并在全部請求都完成后統(tǒng)一返回結(jié)果。

這種緩存策略的一個關鍵優(yōu)勢在于它的復用性和并發(fā)管理能力。即使有多個請求同時要求相同的資源，由于緩存機制的存在，真實的網(wǎng)絡請求只會發(fā)生一次。每個后續(xù)嘗試訪問此數(shù)據(jù)的操作都會得到一個掛起的Promise，而非觸發(fā)新的網(wǎng)絡請求。

緩存及請求細節(jié)處理

在網(wǎng)絡請求Promise后串聯(lián)多個.then()方法時，是在處理與轉(zhuǎn)換原始請求返回的數(shù)據(jù)。示例中，首先處理的是將返回的列表按照特定條件篩選，然后對篩選后的結(jié)果進行進一步的請求。這里的關鍵是Promise.all()，它確保了同時處理多個異步操作。

處理器currentHandler的最后結(jié)果是一個新的Promise，它代表了一系列依賴于原始請求并經(jīng)過一定處理的數(shù)據(jù)。這個Promise作為最終結(jié)果，將被緩存并返回給調(diào)用者。

緩存和請求的一個重要細節(jié)是錯誤處理。當請求出現(xiàn)錯誤時，通常不應該將錯誤的Promise存儲到緩存中，因為這可能導致后續(xù)所有對該數(shù)據(jù)的請求都會立即返回錯誤。相反，可以選擇在錯誤處理邏輯中移除緩存項，或者采取其他的恢復機制。

緩存策略的考慮

實現(xiàn)緩存時，還需要考慮它的有效性和過時機制。只有當數(shù)據(jù)不頻繁變化或者對即時性要求不高的情況下，緩存才是合理的。尤其是在一些數(shù)據(jù)更新周期較長的場景，例如一些配置數(shù)據(jù)、用戶信息等，使用緩存能帶來顯著的性能提升。

有時候，需要設立緩存過期機制，即數(shù)據(jù)在緩存中存儲一段時間后失效，之后的請求將強制發(fā)起新的網(wǎng)絡請求以獲取最新數(shù)據(jù)。緩存過期機制可以通過定時器或者請求次數(shù)等方式來實現(xiàn)。

結(jié)語

合理地使用Promise和緩存可以顯著提升應用的性能，減輕服務器的負擔，并提供更加流暢的用戶體驗。通過在正確的地方引入緩存，可以有效地避免不必要的網(wǎng)絡請求，加快數(shù)據(jù)的加載速度。在此基礎上，合理設置緩存失效機制，能夠確保用戶始終獲取到最新的數(shù)據(jù)，避免緩存導致的數(shù)據(jù)過時問題。

通過上述示例的實踐，開發(fā)者可以根據(jù)自身應用的需要，定制適合自己業(yè)務場景的網(wǎng)絡請求緩存方案。這不僅可以提高程序性能，還可以增加程序的魯棒性，優(yōu)化用戶的交互體驗。

以上就是詳解JS如何使用Promise緩存網(wǎng)絡請求的詳細內(nèi)容，更多關于JS Promise緩存網(wǎng)絡請求的資料請關注腳本之家其它相關文章！

最新評論