Angular第三方API缓存异常：重复触发API调用的技术求助

问题根源在于forEach会并行触发多个请求，当相同userId的请求同时发起时，第一个请求还没完成并写入缓存，后续请求就已经进入缓存检查逻辑，此时缓存为空，导致重复调用第三方API。

核心解决方案：缓存请求的Promise而非最终结果 #

通过维护一个“待处理请求”的映射，让相同userId的后续请求复用同一个未完成的Promise，避免重复发起API调用。

具体实现代码 #

1. 先在服务中添加一个内存映射，用于存储正在进行的请求：

private pendingRequests = new Map<number, Promise<any>>();

2. 修改getUser方法：

getUser(userId: number): Promise<any> {
    // 先检查缓存，有直接返回
    const cached = this.cacheService.get(userId);
    if (cached) {
        return Promise.resolve(cached);
    }

    // 检查是否已有正在进行的请求，有则复用这个Promise
    const pendingRequest = this.pendingRequests.get(userId);
    if (pendingRequest) {
        return pendingRequest;
    }

    // 没有缓存和待处理请求，发起新请求
    const requestPromise = this.THIRDPARTYAPI.getUser(userId)
        .then(user => {
            // 请求成功后写入缓存
            this.cacheService.put(user.id, user);
            return user;
        })
        .finally(() => {
            // 无论成功失败，都从待处理映射中移除
            this.pendingRequests.delete(userId);
        });

    // 将新请求的Promise存入待处理映射
    this.pendingRequests.set(userId, requestPromise);
    return requestPromise;
}

为什么这个方案有效 #

• 当多个相同userId的请求同时触发时，第一个请求会创建Promise并存入pendingRequests，后续请求直接复用这个Promise，不会重复调用第三方API。
• 请求完成（成功/失败）后，会清理pendingRequests，避免内存泄漏，同时成功时写入缓存，后续请求可以直接读取缓存。

原代码的问题 #

原代码中，async/await包裹在新Promise里属于冗余写法，更关键的是：当多个请求并行进入getUser时，缓存还未写入，所有请求都会走到调用第三方API的分支，导致重复请求。

内容的提问来源于stack exchange，提问作者user5417542