ES6的Promise结合reduce构建顺序执行队列

感谢上Di_123

已于 2024-08-17 21:27:46 修改

阅读量1.3k

点赞数

分类专栏： Promise JS异步流程控制前端面试题文章标签： javascript es6

于 2020-12-24 17:28:30 首次发布

本文链接：https://blog.csdn.net/qq_35770417/article/details/111641384

版权

Promise reduce 异步流程控制 ES6 JavaScript

关键词由CSDN通过智能技术生成

前端面试题同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Promise

2 篇文章 0 订阅

订阅专栏

JS异步流程控制

1 篇文章 0 订阅

订阅专栏

用promise和reduce来实现异步流程控制

ES6的promise是用来处理异步操作的，他的一些基础的用法本篇就不在赘述，感兴趣的同学我可以给你们推荐几篇文章，让你们提升一下对Promise的基本认知，推荐如下：

高级前端进阶-微信公众号上推送的一篇文章

ES6Promise实战

接下来话不多说，直接上代码：

  const createPromise = (id: number) => () =>
    new Promise(resolve =>
      setTimeout(()=>{
        console.log(`promise->${id}:${new Date()}`)
        resolve()
      },1000)
    )
  const tasks = [ createPromise(1),createPromise(2),createPromise(3) ]
  console.log(tasks)
  const doTask = tasks.reduce((prev,next: Function) => prev.then(() => next() ), Promise.resolve())
  doTask.then(() => console.log("all done."))

tasks数组中包含的是三个函数，在用reduce去处理的时候，是按照数组的先后顺序去执行的，等上一个函数处理完之后再去执行下一个，而不会去一下子全部执行所有函数，这个是跟Promise.all的一点区别，这里要格外注意下；

接下来看一下控制台出现的现象：

首先，毋庸置疑的是肯定先会打印出tasks数组对应的内容，然后1s之后，先打印promise1，再打印promise2，promise3，all done。这里要格外注意一下。

这里三个函数是按照顺序执行的，并没有同时执行，等到全部执行完成，最后执行then()中的方法。其实这种reduce写法，就相当于Promise().then().then().then()的写法，只不过使用reduce代码更简洁了，我们需要注意的是reduce()的数组是一个Function的数组，而不是Promise的数组。另外，reduce()方法的第二个参数，他是一个初始值，在这里就是Promise.resolve()，他表示一个动作已经执行完成，可以进行下一个动作了。