如何避免重复的并行 API 请求：基于 Promise 的缓存与去重方案-js教程-PHP中文网

如何避免重复的并行 API 请求：基于 Promise 的缓存与去重方案

本文介绍一种轻量、高效的方法，通过缓存 promise 实例而非最终响应值，确保相同参数的 api 请求在并行场景下仅发起一次，后续请求自动复用正在执行中的 promise，从而彻底避免重复调用。

本文介绍一种轻量、高效的方法，通过缓存 promise 实例而非最终响应值，确保相同参数的 api 请求在并行场景下仅发起一次，后续请求自动复用正在执行中的 promise，从而彻底避免重复调用。

在前端开发中，频繁且重复地请求相同参数的 API 不仅浪费带宽和服务器资源，还可能引发竞态条件或数据不一致问题。你当前的实现虽已引入缓存逻辑（_knownData 数组查找），但因缓存的是已完成的响应结果，无法应对两个 callAPI(param1) 几乎同时触发的场景——此时两者均未命中缓存，各自发起独立请求。

✅ 正确解法是：缓存 Promise 本身，而非 response。只要首次请求的 Promise 尚未 settle（即仍在 pending 状态），后续同参调用直接返回该 Promise 引用。JavaScript 的 Promise 天然支持“多次 .then() 绑定同一实例”，且自动共享最终结果，这正是我们所需的核心机制。

以下是优化后的实现（含错误处理与类型安全增强）：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

const _pendingRequests = new Map(); // 推荐使用 Map 替代对象，支持任意键类型（如 Symbol、Object）

function callAPI(param) {
  // 若已存在对应参数的 Promise，直接返回它
  if (_pendingRequests.has(param)) {
    return _pendingRequests.get(param);
  }

  // 创建新请求 Promise，并立即缓存（注意：此处缓存的是 Promise，非 await 后的结果）
  const promise = fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ param })
  })
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      return response.json();
    })
    .catch(err => {
      // 清除失败的 Promise 缓存，避免后续请求永远等待失败 Promise
      _pendingRequests.delete(param);
      throw err;
    });

  _pendingRequests.set(param, promise);

  // 返回 Promise，供调用方链式处理
  return promise;
}

// 使用示例：并发调用相同参数，仅触发一次网络请求
callAPI('user-123').then(data => console.log('First:', data));
callAPI('user-123').then(data => console.log('Second (cached):', data)); // 自动复用上一个 Promise
callAPI('user-456').then(data => console.log('Third:', data));

? 关键要点说明：

Promise 是引用类型：_pendingRequests.set(param, promise) 存储的是 Promise 对象引用，所有 .then() 调用都监听同一个实例，天然共享 resolve/reject 结果；
无需手动管理状态：不必判断“是否正在请求中”，Promise 的 pending → fulfilled/rejected 状态机由浏览器自动维护；
失败需清理缓存：若请求失败（如网络错误、404），应从 _pendingRequests 中删除该条目，否则后续相同请求将永远等待一个已 reject 的 Promise（导致“卡死”）；
推荐使用 Map：相比普通对象，Map 支持任意类型的 key（如数字、Symbol、甚至自定义对象），且遍历更安全、性能更优；
无需额外包装 new Promise：原代码中冗余的 new Promise((resolve, reject) => {...}) 完全可省略——直接返回 fetch(...).then(...) 即可，更简洁、无嵌套陷阱。

? 扩展建议：如需支持取消请求、设置超时或添加加载状态，可在 Promise 外层封装工具函数（如 AbortController 或 Promise.race([...])），但核心去重逻辑保持不变。此方案零依赖、零侵入，一行代码升级即可解决并行重复请求痛点。