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

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

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

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

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 可解决此问题。

YouMind

AI内容创作和信息整理平台

207 查看详情 YouMind

做法：

维护一个正在进行中的请求映射表
如果请求已在进行，返回对应的 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;
}

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

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

# 多个 # SEO行业运营管理简历 # 阿坝seo哪家好 # 网站平台运营推广 # 南昌营销推广价钱高 # 网站建设售后如何 # 错误的seo观念 # 抖音seo搜索的ppt # 龙岩抖音搜索seo推广 # 常德靠谱营销推广 # 芜湖德阳网站优化服务 # 已在 # 解决问题 # 中文网 # 相关文章 # 缓存 # 尤其是 # 加载 # 适用于 # 已有 # 如何用 # ai # 前端开发 # json # 前端 # js # java # javascript # 去重

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-10-02

4008744355

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

1. 使用 Map 实现请求缓存

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

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

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice