使用 Promises 避免重复的并行 API 调用

Question

我目前正在开发一个从 API 获取数据的前端脚本。为了优化性能，我实现了 Promise。一旦对特定参数进行 API 调用，结果就会存储在变量中，并且使用之前获取的数据来解析对同一参数的后续请求。

当前代码如下所示

let _knownData = [];
function callAPI(param) {
    return new Promise((resolve, reject) => {
        let find = _knownData.find(x => x.param === param);
        if (find) {
            resolve(find.response);
        } else {
            fetch (API_URL, {param: param}). then(res => {
                if (res) {
                    _knownData.push({ param: param, response: res });
                    resolve(res);
                } else {
                    reject(false);
                }
            })
        }
    });
}


callAPI(param1).then( ... )
callAPI(param2).then( ... )

这很有效，除非并行发出对同一参数的两个请求。在这种情况下，API 会被调用两次，因为第二个请求是在第一个请求被解析并存储在缓存变量之前发起的。

我想要实现这样一种场景：每个唯一参数仅进行一次 API 调用，并且对同一参数的任何后续请求都将等待第一个承诺解决。我正在寻找一种不会使代码过于复杂的解决方案。

Answer 1

存储承诺而不是等待最终结果。

const _knownData = {};
function callAPI(param) {
    if (_knownData[param]) return _knownData[param];
    const promise = new Promise(...);
    _knownData[param] = promise;
    return promise;
}