[清代八股文]Promise如何实现串行执行

要求

写一个函数，接收一个数组，数组里面的子元素均为执行后能返回Promise对象的函数，要求这些函数按顺序依次执行，最终输出顺序执行的结果。

// 6s后输出[1,2,3]
const funcArr = [
  () =>
    new Promise((resolve) => {
      setTimeout(() => resolve(1), 2000);
    }),
  () =>
    new Promise((resolve) => {
      setTimeout(() => resolve(2), 1000);
    }),
  () =>
    new Promise((resolve) => {
      setTimeout(() => resolve(3), 3000);
    }),
];

思路

由于前一个函数执行的结果需要影响到后一个函数的执行，考虑用reduce函数来实现这种顺序关联关系。能想到reduce这个解法，这个问题实际上就迎刃而解了。

// 函数最终返回一个promise
function runPromiseByQueue(promiseFuncArr) {
  const res = [];
  return new Promise((resolve, reject) => {
    promiseFuncArr
      .reduce(
        (acc, cur) => acc.then(cur).then((data) => res.push(data)),
        Promise.resolve()
      )
      // reduce函数最终返回一个promise，在onResolved这一步骤执行resolve，将结果输出
      .then(() => resolve(res));
  });
}

最终效果如下：

runPromiseByQueue(funcArr).then(data => console.log(data)) // 6s后输出[1,2,3]

总结

当然，这个做法只是满足了文中开头所要求的效果，核心功能已经实现。对于一些健壮性的处理并没有做(比如输入参数类型的判断，对于执行时可能出现的reject情况处理），核心是利用reduce函数既能遍历数组，又能在前后元素之间建立联系的特点。