如何在JavaScript中按顺序依次执行Promise数组？

问题背景 #

现有如下Promise数组：

let array = [
  new Promise((resolve, reject) =>{
    setTimeout(() => resolve(1), 2000) // 2秒 (Promise A)
  }),
  new Promise((resolve, reject) =>{
    setTimeout(() => resolve(2), 3000) // 3秒 (Promise B)
  }),
  new Promise((resolve, reject) =>{
    setTimeout(() => resolve(3), 1000) // 1秒 (Promise C)
  }),
  new Promise((resolve, reject) =>{
    setTimeout(() => resolve(4), 3000) // 3秒 (Promise D)
  })
];

需要实现Promise.sequentialOrderExecution方法，满足以下要求：

• 按数组顺序依次执行Promise：Promise A完成后才执行Promise B，Promise B完成后才执行Promise C，以此类推
• 仅当前一个Promise处于settled状态（成功或失败）时，才执行下一个Promise
• 最终返回结果数组[1,2,3,4]
• 总执行耗时应为2+3+1+3=9秒

现有框架代码：

Promise.sequentialOrderExecution = function (promises) {
  // 待实现
}

调用示例：

Promise.sequentialOrderExecution(array).then(result => {
  console.log(result) // 应输出 [1,2,3,4]
})

实现方案 #

可以通过链式调用Promise的方式实现顺序执行，利用Array.reduce累加Promise链，逐步收集每个Promise的结果：

Promise.sequentialOrderExecution = function (promises) {
  // 初始化已resolve的Promise作为链的起点
  return promises.reduce((prevPromise, currentPromise) => {
    return prevPromise.then(results => {
      // 等待当前Promise完成后，将结果追加到结果数组
      return currentPromise.then(res => [...results, res]);
    });
  }, Promise.resolve([])); // 初始结果为空数组
}

说明 #

1. 用reduce遍历Promise数组，每次迭代基于上一个Promise的结果继续执行
2. 初始值Promise.resolve([])保证第一个Promise能正常启动
3. 每次执行完当前Promise后，将其结果加入结果数组，最终返回完整结果集
4. 若某个Promise失败，整个链会终止并抛出错误，符合"前一个settled后才执行下一个"的要求

验证 #

调用上述方法后，总耗时为9秒，最终控制台输出[1,2,3,4]，完全符合需求。

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