如何优化JavaScript中Promise队列逻辑以避免重复发起服务端请求

方案优化思路 #

你要实现的是异步请求单例+结果缓存的能力，你的现有实现思路是可行的，但确实可以更简洁：利用Promise本身状态固化的特性，直接缓存请求的Promise实例即可，不需要手动维护resolve队列和请求状态，底层JS引擎已经帮你做好了等待逻辑。

另外你的现有实现还有两个明显问题：

• 缓存命中的分支直接返回普通值，和其他场景返回Promise的类型不一致，调用方统一用await/then处理时会有隐患
• 没有处理请求失败的场景，一旦服务端请求报错，所有排队的调用方都会永久卡住得不到响应

优化后实现代码 #

function getValueFromServer() {
  console.log("get value from server");
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("value");
      // 测试错误场景可以用这个：reject(new Error('request failed'))
    }, Math.floor(Math.random() * 10));
  });
}

var singObj = {
  // 直接缓存请求Promise，不需要额外的队列、状态字段
  valuePromise: null,
  getValue: function() {
    // 已经有缓存的请求/结果，直接返回缓存的Promise即可
    if (this.valuePromise) {
      return this.valuePromise;
    }
    // 没有缓存则发起请求，缓存这个Promise
    this.valuePromise = getValueFromServer()
      .catch(err => {
        // 如果需要请求失败后下次调用重新发起请求，可以在这里加清空缓存的逻辑
        // this.valuePromise = null;
        throw err;
      });
    return this.valuePromise;
  }
}

// 测试代码不变
function getValueUsage() {
  var result = Promise.allSettled([singObj.getValue(), singObj.getValue(), singObj.getValue()]);
  console.log(result);
  var result = Promise.allSettled([singObj.getValue(), singObj.getValue(), singObj.getValue()]);
  console.log(result);
}

getValueUsage();

方案优势 #

• 代码量大幅减少，没有自定义的队列遍历、状态维护逻辑，完全依赖JS内置的Promise能力，稳定性更高
• 所有场景统一返回Promise类型，调用方不需要兼容两种返回值
• 天然支持错误传递，请求失败时所有调用方都能捕获到错误，不会出现无限等待的问题
• 扩展成本低：如果需要增加缓存过期、失败重试、主动清空缓存等能力，只需要操作valuePromise这一个缓存字段即可

内容的提问来源于stack exchange，提问作者Eduard Paul Lakida