当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript请求缓存与去重实现方法

JavaScript请求缓存与去重实现方法

2025-12-05 15:27:54 0浏览收藏

推广推荐

免费电影APP ➜

支持 PC / 移动端，安全直达

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript实现请求缓存与去重方法》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

先查缓存再判断进行中请求，最后发起新请求。通过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 可解决此问题。

做法：

维护一个正在进行中的请求映射表
如果请求已在进行，返回对应的 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请求缓存与去重实现方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于JavaScript,map,请求缓存,Promise,请求去重的知识点！

JavaScript map 请求缓存 Promise 请求去重