本文介绍一种轻量、高效的方法，通过缓存 promise 实例而非最终响应值，确保相同参数的 api 请求在并行场景下仅发起一次，后续请求自动复用正在执行中的 promise，从而彻底避免重复调用。
本文介绍一种轻量、高效的方法，通过缓存 promise 实例而非最终响应值，确保相同参数的 api 请求在并行场景下仅发起一次，后续请求自动复用正在执行中的 promise，从而彻底避免重复调用。
在前端开发中，频繁且重复地请求相同参数的 API 不仅浪费带宽和服务器资源，还可能引发竞态条件或数据不一致问题。你当前的实现虽已引入缓存逻辑（_knownData 数组查找），但因缓存的是已完成的响应结果，无法应对两个 callAPI(param1) 几乎同时触发的场景——此时两者均未命中缓存，各自发起独立请求。
✅ 正确解法是：缓存 Promise 本身，而非 response。只要首次请求的 Promise 尚未 settle（即仍在 pending 状态），后续同参调用直接返回该 Promise 引用。JavaScript 的 Promise 天然支持“多次 .then() 绑定同一实例”，且自动共享最终结果，这正是我们所需的核心机制。
以下是优化后的实现（含错误处理与类型安全增强）：
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([...])），但核心去重逻辑保持不变。此方案零依赖、零侵入，一行代码升级即可解决并行重复请求痛点。
