前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >什么是Promise串行

什么是Promise串行

作者头像
用户1687375
发布2020-02-25 10:28:10
1K0
发布2020-02-25 10:28:10
举报
文章被收录于专栏:较真的前端

什么是Promise串行

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

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

代码语言:javascript
复制
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的方法。

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

代码语言:javascript
复制
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循环的放置到上一个promisethen回调里。

需要注意的几点:

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

对策:

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

第一版代码如下:

代码语言:javascript
复制
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的链式操作是可以传递值的,所以可以利用这个特性,省去中间变量,

代码如下:

代码语言:javascript
复制
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版本

代码如下:

代码语言:javascript
复制
const execute = async (tasks = []) => { 
  const resultList = [];
  for(task of tasks) {
    try {
      resultList.push(await task());
    } catch (e) {
      resultList.push(null);
    }
  }
  return resultList; 
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-02-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 较真的前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是Promise串行
  • 为什么要讲Promise串行
  • 分布讲解Promise串行
    • Promise串行习题
      • 改进
        • aysnc/await版本
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档