[清代八股文]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函數既能遍歷數組，又能在前后元素之間建立聯系的特點。