javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS Promise缓存网络请求

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

作者:慕仲卿

网络请求是现代Web应用中的常见操作,很多时候需要获取服务器上的数据,在进行网络请求时,为了减轻服务器的压力,缓存策略常被用来避免对同一数据的重复请求,本文将探讨如何使用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通过链式的.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缓存网络请求的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文