手写系列之串行Promise执行 - 图1

本文主要是介绍了如何串行执行promise，其实这种编程方式还有很多案例，例如：红绿灯，js控制图片加载…

1. 直接上代码

  1. // 1. 利用高阶函数来执行生成不同时期完成的promise
  2. const makePromise = (time, num) => {
  3.   return () => {
  4.     return new Promise((resolve) => {
  5.       setTimeout(() => {
  6.         console.log(`第${num}张图片下载完成...`)
  7.         resolve()
  8.       }, time)
  9.     })
  10.   }
  11. }
  13. // 2. 返回一个数组函数，函数的返回值都是一个promise
  14. const allPromise = [1, 2, 3].map((item) => makePromise(item * 1000, item))
  15. // 3. 利用promise来将每个promise合并
  16. const sum = allPromise.reduce((pre, cur) => {
  17.   // 3.1 最外层的promise状态，将promise进行串链，这个promise完成取决于下个promise完成
  18.   return pre.then(() => {
  19.     // 3.2 返回一个新的promise表示状态
  20.     return new Promise((resolve) => {
  21.       // 3.3 最里面的promise控制什么时候执行完成，函数会返回一个promise
  22.       cur().then(() => {
  23.         resolve()
  24.       })
  25.     })
  26.   })
  27. }, Promise.resolve())
  28. sum.then(() => {
  29.   console.log('完成了...')
  30. })

2. 解释

其实看上述的代码注释已经很清楚了，这种会把重点解释下

  • 首先利用数组函数reduce将每个元素进行串联
  • 最外层的返回是否成功，取决于内存的promise是否执行结束
  • 返回一个全新的prmise，这个Promise用来控制串行的promise是否执行成功
  • 如果串行的Promise执行成功，告知上述全新的promise成功了