如何用JavaScript实现一个网络请求的缓存与去重策略？-js教程-PHP中文网

如何用JavaScript实现一个网络请求的缓存与去重策略？

夢幻星辰

发布： 2025-10-02 21:45:02

原创

983人浏览过

先查缓存再判断进行中请求，最后发起新请求。通过Map实现缓存与去重，减少重复请求、提升性能，适用于频繁点击、搜索补全等场景，需注意缓存有效期和错误处理。

如何用javascript实现一个网络请求的缓存与去重策略？

在前端开发中，频繁的网络请求会影响性能和用户体验。通过实现缓存与去重策略，可以有效减少重复请求、降低服务器压力并提升响应速度。以下是使用 JavaScript 实现网络请求缓存与去重的核心思路和代码示例。

1. 使用 Map 实现请求缓存

将已成功返回的数据按请求参数存储，下次相同请求直接返回缓存结果。

关键点：

用 URL 和参数生成唯一键
设置可选的过期时间
返回 Promise 保持接口一致性

const cache = new Map();

function generateKey(url, options) {
  const params = JSON.stringify(options?.body || {});
  return `${url}#${options?.method || 'GET'}#${params}`;
}

async function cachedFetch(url, options = {}) {
  const key = generateKey(url, options);
  const cached = cache.get(key);

  if (cached && Date.now() < cached.expiry) {
    return cached.data;
  }

  try {
    const response = await fetch(url, options);
    const data = await response.json();

    // 缓存10秒，可配置
    cache.set(key, {
      data,
      expiry: Date.now() + 10000
    });

    return data;
  } catch (error) {
    // 若无缓存则抛出错误
    if (!cached) throw error;
    return cached.data;
  }
}

登录后复制

2. 防止重复请求（去重）

当相同请求同时发起时，避免创建多个 fetch 实例。共享同一个 Promise 可解决此问题。

立即学习“Java免费学习笔记（深入）”；

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

做法：

维护一个正在进行中的请求映射表
如果请求已在进行，返回对应的 Promise
请求结束后从表中清除

const pendingRequests = new Map();

async function deduplicatedFetch(url, options = {}) {
  const key = generateKey(url, options);

  // 如果已有相同请求在进行，复用其 Promise
  if (pendingRequests.has(key)) {
    return pendingRequests.get(key);
  }

  const requestPromise = fetch(url, options)
    .then(async res => {
      if (!res.ok) throw new Error(res.statusText);
      return res.json();
    })
    .finally(() => {
      pendingRequests.delete(key);
    });

  pendingRequests.set(key, requestPromise);
  return requestPromise;
}

登录后复制

3. 结合缓存与去重的完整方案

先查缓存，再判断是否已有进行中的请求，最后发起新请求。

async function smartFetch(url, options = {}, { ttl = 10000 } = {}) {
  const key = generateKey(url, options);

  // 1. 检查缓存
  const cached = cache.get(key);
  if (cached && Date.now() < cached.expiry) {
    return cached.data;
  }

  // 2. 检查是否有进行中的请求
  if (pendingRequests.has(key)) {
    return pendingRequests.get(key);
  }

  // 3. 发起新请求
  const requestPromise = fetch(url, options)
    .then(async res => {
      if (!res.ok) throw new Error(res.statusText);
      const data = await res.json();

      // 更新缓存
      cache.set(key, {
        data,
        expiry: Date.now() + ttl
      });

      return data;
    })
    .catch(err => {
      // 请求失败但有旧缓存时返回旧数据
      const fallback = cache.get(key);
      if (fallback) return fallback.data;
      throw err;
    })
    .finally(() => {
      pendingRequests.delete(key);
    });

  pendingRequests.set(key, requestPromise);
  return requestPromise;
}

登录后复制

基本上就这些。这个方案适用于按钮频繁点击、自动补全搜索、轮询等场景。注意根据业务需求调整缓存有效期和清理策略，比如定期清空过期项或限制最大缓存数量。不复杂但容易忽略细节，尤其是错误处理和缓存更新时机。

以上就是如何用JavaScript实现一个网络请求的缓存与去重策略？的详细内容，更多请关注php中文网其它相关文章！