社区首页 >专栏 >什么是Promise串行

什么是Promise串行

用户1687375

发布于 2020-02-25 02:28:10

1.1K00

代码可运行

文章被收录于专栏：较真的前端较真的前端

运行总次数：0

代码可运行

什么是Promise串行

Promise串行是指每一个由promise封装的任务都顺序执行，即上一个执行完成后再执行下一个。

执行过程大致是下面的样子：

Task A | ------>|
Task B |         ------>|
Task C |                 ------>|
Task D |                         ------>|

为什么要讲Promise串行

我们平时会比较多的使用并行，即多个任务一起执行，也就是利用Promise.all()。但其实在日常开发中串行也是会遇到的，比如依次开启走廊的所有灯，或者其次让喷泉的水枪依次喷水等等。但是ES6中的Promise并没有对串行进行直接封装，所以需要我们自己来做。

img

分布讲解Promise串行

Promise串行习题

之前有小伙伴发给过我一道这样的面试题，所以本文准备通过这道题来实现一下Promise串行。

定义 type Task = () => Promise （即 Task 是一个类型，是一个返回值是 Promise 的函数类型）假设有一个数组 tasks: Task[]（每一项都是一个 Task 类型的数组）实现一个方法 function execute(tasks: Task[]): Promise，该方法将 tasks 内的任务依次执行，并返回一个结果为数组的 Promise ，该数组包含任务执行结果（以执行顺序排序）要求：忽略异常任务，并在结果数组中用 null 占位限制：不添加任何依赖，仅使用 Promise，不使用 Generator 或 async

如果允许使用Generator或者async/await来写的话，会很简单，文章末尾再实现async/await的方法。

先做完成一下测试用例的代码：

const Task = (result, isSuccess = true) => {
  return () => new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isSuccess) {
        console.log(`success: ${result}`);
        resolve(result);
      } else {
        console.log(`error: ${result}`);
        reject(result);
      }
    }, 1000);
  });
}


execute([
  Task('A'),
  Task('B'),
  Task('X', false),
  Task('C'),
]).then(resultList => {
  // 这里期望打印 ["A", "B", null, "C"]
  console.log(resultList)
})

思路大致如下图：先做一个Promise实例，然后把每个Task循环的放置到上一个promise的then回调里。

需要注意的几点：

无论每个Task是成功还是失败，它都不能阻断下一个Task的执行
最后的then需要把每个Task的执行结果"决议"出去

对策：

每一个Task外层包装一层Promise，捕获Task的reject状态
可以利用一个中间变量，缓存所有Task的输出结果，然后在最后一个Promise的then里把中间变量“决议”出去

第一版代码如下：

function execute(tasks) {
    let resultList = [];
  return tasks.reduce(
    (previousPromise, currentPromise) => previousPromise.then((resultList) => {
    return new Promise(resolve => {
      currentPromise().then(result => {
                resultList.push(result);
        resolve()
      }).catch(() => {
                  resultList.push(null);
              resolve(resultList.concat(null))
      })
    })
  }),
    Promise.resolve()
  ).then(() => resultList);
}

改进

其实Promise的链式操作是可以传递值的，所以可以利用这个特性，省去中间变量，

代码如下：

function execute(tasks) {
  return tasks.reduce(
    (previousPromise, currentPromise) => previousPromise.then((resultList) => {
    return new Promise(resolve => {
      currentPromise().then(result => {
        resolve(resultList.concat(result))
      }).catch(() => {
        resolve(resultList.concat(null))
      })
    })
  }),
    Promise.resolve([])
  )
}

aysnc/await版本

代码如下:

const execute = async (tasks = []) => { 
  const resultList = [];
  for(task of tasks) {
    try {
      resultList.push(await task());
    } catch (e) {
      resultList.push(null);
    }
  }
  return resultList; 
}