详解JS如何使用Promise缓存网络请求

背景与概念

在涉及网络请求的应用开发中，特别是针对数据更新频率较低的场景，缓存是一种常见且高效的优化策略。通过缓存机制，可以显著降低网络延迟，减少冗余的数据传输，节约带宽资源，从而改善用户的交互体验。然而，若缓存策略设计不当，可能会导致用户获取到陈旧的数据。因此，构建一个合理且健壮的缓存机制至关重要。

Promise是JavaScript中用于处理异步操作的核心模式，它代表一个尚未完成但预期将来会完成的操作。利用Promise，开发者可以将异步操作进行队列化管理，支持链式调用，并在合适的时机进行错误捕获与处理。

缓存网络请求的需求与挑战

在复杂的应用架构中，多个组件或页面往往需要获取相同的数据。如果每个组件都独立发起网络请求，将造成极大的资源浪费。为此，需要一种机制来“共享”已发起的请求：当请求完成后，所有依赖该数据的组件都能接收到结果。此外，若数据已存在于本地缓存中，则无需重新发起网络请求，直接返回缓存数据即可。

实现这一功能面临以下几个主要挑战：

• 请求复用：避免对同一数据的重复发起请求。
• 并发控制：确保针对相同数据源在同一时间内仅发送一次请求。
• 缓存有效性：确保缓存的是有效数据，同时避免返回过时信息。
• 容错处理：当请求失败时，需明确如何处理错误并通知依赖该数据的其他模块。

Promise缓存网络请求的实现

具体实现上，可以创建一个缓存对象，用于存储已发起请求的Promise实例。在发起新请求前，先检查缓存中是否已存在对应的Promise；若存在，直接返回该Promise；若不存在，则发起新的网络请求，并将生成的Promise存入缓存中。

以下是一个简化的实现示例，我们将逐一解析核心代码逻辑：

import utils from '@/utils';

export const reqThenCacheData = (
  name: string
): Promise<void | Promise<utils.ICachedData>> => {
  // 尝试获取缓存数据
  const cache = utils.cacheForData.get(name);

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

  // 没有缓存，构造请求URL，发起网络请求
  const url = `http://*******?name=${name}`;
  const currentHandler = (
    request.get({ url }) as unknown as Promise<Array<utils.ICachedListData>>
  )
    .then((data: Array<utils.ICachedListData>) => {
      // 对返回的数据进行处理，得到一个子请求列表
      const subList: Array<string> = data.map((sub) => {
        if (sub.is_default === 1) return sub.subName;
      });
      return subList.filter((item) => item);
    })
    .then((subNames: Array<string>) => {
      // 根据第一次请求的结果，构建第二次请求的Promise数组
      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>) => {
      // 可以进一步处理所有子请求的结果
      // 示例仅返回其中一个子请求结果
      return subData[0];
    })
    .catch((error) => {
      console.log('请求数据失败！', error);
      // 错误处理：可以决定是否从缓存中移除错误的Promise
      utils.cacheForData.delete(name);
      // 根据需要，可以在这里抛出错误或返回一个默认值
      throw error;
    });

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

缓存逻辑概述

上述代码展示了基于Promise的网络请求缓存机制。首先，通过调用cacheForData.get(name)尝试从缓存中获取已存在的请求Promise。如果找到匹配的缓存项，则直接返回该Promise，从而避免重复发起网络请求。

若缓存中未找到对应的Promise，则发起一个新的网络请求。请求返回的Promise通过链式的.then()方法进行处理。这些.then()方法负责对返回的数据进行加工和转换，开发者可根据实际业务需求添加具体的数据处理逻辑。

最后，使用catch()方法处理可能发生的错误，并将当前请求的Promise对象通过cacheForData.set(name, currentHandler)方法存储到缓存中，以便后续请求直接复用。

多阶段请求处理

上述代码还展示了如何处理需要多次网络请求的复杂场景。系统首先检查缓存中是否存在目标数据的Promise。若缓存未命中，则发起初始网络请求。获取初始数据后，提取必要信息组成新的请求数组。

利用Promise.all()方法，可以并行处理多个网络请求。该方法返回一个新的Promise，它将在所有子请求完成时解析。这一过程是Promise缓存实现的核心，它使得各个请求之间能够共享状态，并在所有请求完成后统一返回结果。

这种缓存策略的关键优势在于其复用性和并发管理能力。即使有多个请求同时要求相同的资源，由于缓存机制的存在，真实的网络请求只会发生一次。后续所有尝试访问此数据的操作都将获得一个挂起的Promise，而不会触发新的网络请求。

缓存及请求细节处理

在网络请求Promise后串联多个.then()方法时，主要任务是处理与转换原始请求返回的数据。示例中，首先对返回的列表按照特定条件进行筛选，然后对筛选后的结果发起进一步的请求。这里的关键是Promise.all()，它确保了多个异步操作能够被同时处理。

处理器currentHandler的最终结果是一个新的Promise，它代表了一系列依赖于原始请求并经过特定处理的数据。这个Promise作为最终结果，将被缓存并返回给调用者。

缓存和请求的一个重要细节是错误处理。当请求出现错误时，通常不应将错误的Promise存储到缓存中，因为这可能导致后续所有对该数据的请求都立即返回错误。相反，可以在错误处理逻辑中移除缓存项，或者采取其他恢复机制。

缓存策略的考虑

实现缓存时，还需考虑其有效性和过期机制。只有当数据不频繁变化或对即时性要求不高时，缓存才是合理的。特别是在一些数据更新周期较长的场景，如配置数据、用户信息等，使用缓存能带来显著的性能提升。

有时，需要设立缓存过期机制，即数据在缓存中存储一段时间后失效，之后的请求将强制发起新的网络请求以获取最新数据。缓存过期机制可以通过定时器或请求次数等方式来实现。

结语

合理地使用Promise和缓存可以显著提升应用性能，减轻服务器负担，并提供更加流畅的用户体验。通过在合适的地方引入缓存，可以有效避免不必要的网络请求，加快数据加载速度。在此基础上，合理设置缓存失效机制，能够确保用户始终获取到最新的数据，避免缓存导致的数据过时问题。

通过上述示例的实践，开发者可以根据自身应用的需求，定制适合自身业务场景的网络请求缓存方案。这不仅可以提高程序性能，还可以增强程序的鲁棒性，优化用户的交互体验。

以上就是详解JS如何使用Promise缓存网络请求的详细内容，更多关于JS Promise缓存网络请求的资料请关注本站其它相关文章！