如何恰当缓存 Promise 来防止重复请求

本文详解在 angular 等异步环境中缓存 promise 的核心原理与实践方案，重点解决因并发调用导致缓存失效、重复请求第三方 api 的问题，并提供顺序执行与去重预加载两种高效解决方案。

本文详解在 angular 等异步环境中缓存 promise 的核心原理与实践方案，重点解决因并发调用导致缓存失效、重复请求第三方 api 的问题，并提供顺序执行与去重预加载两种高效解决方案。

在实际开发中，当多个 UI 组件或数据行（如表格列表）频繁请求同一用户 ID 的数据时，若未妥善处理 Promise 缓存逻辑，极易触发重复 HTTP 请求——即使缓存服务已存在对应值，仍会因并发调用时机错位而“错过”缓存命中。根本原因在于：forEach 是同步遍历，不会等待内部的 Promise 完成，导致所有 getUser(userId) 几乎同时发起，此时缓存尚未写入，每次均穿透至第三方 API。

✅ 正确做法一：顺序执行（适用于依赖严格时序或需逐条处理响应的场景）

使用 for...of + await 确保请求串行化，天然规避竞态：

// ✅ 推荐：顺序执行，保证缓存写入后才发起下一次查询for (const row of data) {  try {    const user = await this.getUser(row.userId);    // ✅ 此时 user 必然来自缓存（第二次起）或首次请求结果    this.processUser(row, user);  } catch (error) {    console.error(`Failed to fetch user ${row.userId}`, error);  }}

对应修正后的 getUser 方法（移除冗余 async/await，避免 Promise 构造反模式）：

getUser(userId: number): Promise<any> {  const cached = this.cacheService.get(userId);  if (cached) {    return Promise.resolve(cached); // 直接返回已解析的 Promise  }  // 发起真实请求并缓存结果  return this.THIRDPARTYAPI.getUser(userId)    .then(user => {      this.cacheService.put(user.id, user);      return user;    });}

⚠️ 注意：new Promise(async (resolve) => { ... }) 属于反模式——async 回调无法被 resolve 正确捕获异常，且增加不必要的嵌套。应直接链式调用 .then() 或 async/await 在调用层。

✅ 正确做法二：批量去重 + 预加载（推荐用于高性能、高复用场景）

当 data 中存在大量重复 userId 时，最优解是先提取唯一 ID，统一请求并填充缓存，再遍历消费：

// ✅ 高效：一次去重 + 并发预加载，最大化缓存命中率const uniqueUserIds = [...new Set(data.map(row => row.userId))];const userPromises = uniqueUserIds.map(id => this.getUser(id));try {  const users = await Promise.all(userPromises);  const userMap = new Map(users.map(u => [u.id, u]));  // ✅ 此时所有 getUser() 调用均命中缓存  data.forEach(row => {    const user = userMap.get(row.userId);    if (user) {      this.processUser(row, user);    }  });} catch (error) {  console.error('Failed to preload users', error);}

? 关键原则总结

• 缓存本质是状态共享：Promise 本身可被多次 .then() 订阅，因此「缓存 Promise 实例」比「缓存结果值」更优（避免重复 resolve）；
• 避免 forEach + Promise 组合：它不提供并发控制，永远是“火球式”并发；
• 优先 Promise.all + 去重：对重复 ID 场景吞吐量最高；
• 慎用 await 在循环中：虽能解决问题，但牺牲了并发收益；仅在业务逻辑强依赖前序结果时选用。

通过合理设计缓存策略与调用方式，即可在不修改第三方库的前提下，显著降低网络开销，提升应用响应性能与用户体验。