如何用Promises避免并行重复API调用？

核心思路是缓存正在进行的Promise实例，而不是仅缓存最终的响应结果。这样同一参数的并行请求会共享同一个Promise，等待其完成后获取结果，彻底避免重复发起API调用。

简洁优化版代码 #

const _cache = new Map();

function callAPI(param) {
    // 检查是否已有缓存（pending Promise 或已完成的结果）
    if (_cache.has(param)) {
        return _cache.get(param);
    }

    // 发起新请求并创建Promise
    const requestPromise = fetch(API_URL, { param })
        .then(response => {
            // 处理响应为业务需要的res（示例：解析JSON并处理）
            return response.json().then(rawData => {
                // 这里替换成你的实际响应处理逻辑
                const res = rawData;
                if (!res) throw new Error('无效的API响应');
                
                // 替换缓存为已resolved的Promise，后续请求直接拿结果
                _cache.set(param, Promise.resolve(res));
                return res;
            });
        })
        .catch(error => {
            // 请求失败时移除缓存，允许后续重新发起请求
            _cache.delete(param);
            throw error; // 传递错误给调用方
        });

    // 将pending的Promise存入缓存
    _cache.set(param, requestPromise);
    return requestPromise;
}

关键逻辑说明 #

• 缓存复用机制：用Map存储两种状态的内容：正在等待的pending Promise、已完成的成功结果（包装为resolved Promise）
• 并行请求共享：同一参数的第二个请求发起时，直接返回缓存中已存在的pending Promise，无需重复调用API
• 成功缓存固化：请求成功后，将缓存中的pending Promise替换为已resolved的结果Promise，后续请求直接获取最终数据
• 失败缓存清理：请求失败时删除对应缓存，避免后续请求一直拿到失败的Promise，允许重新发起请求

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