Promise是如何执行的？
让我们来一起看看这个例子，下面的这个例子是一个数组，数组中的每一个元素都是一个函数，函数会返回一个Promise对象，但是每个Promise对象都被定时器控制着执行时间，熟系JS事件循环机制的同学都知道，Promise属于微任务，在执行的时候会加入到微任务队列中，所以执行顺序是2 -> 1 -> 3
const funcArr = [ () => new Promise((resolve) => { setTimeout(() => resolve(1), 2000); }), () => new Promise((resolve) => { setTimeout(() => resolve(2), 1000); }), () => new Promise((resolve) => { setTimeout(() => resolve(3), 3000); }), ]; for (let v of funcArr) { v().then(res => console.log(res)) } 复制代码
核心思想
实现Promise的核心思想是借助reduce,reduce这个API可以将不同的Promise串联起来。
实现步骤
第一步：定义一个接收不同Promise执行结果的数组
const res = [] 复制代码
第二步：返回一个Promise对象
return new Promise((resolve,reject) => { }) 复制代码
第三步：通过reduce将不同的Promise进行串联执行
arr.reduce((pre,cur) => { return pre.then(cur).then(data => res.push(data)) },Promise.resolve()).then(() => resolve(res)) 复制代码
完整代码
const funcArr = [ () => new Promise((resolve) => { setTimeout(() => resolve(1), 2000); }), () => new Promise((resolve) => { setTimeout(() => resolve(2), 1000); }), () => new Promise((resolve) => { setTimeout(() => resolve(3), 3000); }), ]; /** * @description: 实现Promise的串行 * @param {*}: 接收一个包含多个返回Promise对象的函数的数组 * @return {*}: 返回一个Promise对象 */ function inOrder(arr) { const res = [] return new Promise((resolve,reject) => { arr.reduce((pre,cur) => { return pre.then(cur).then(data => res.push(data)) },Promise.resolve()).then(() => resolve(res)) }) } inOrder(funcArr).then(data => console.log(data)) 复制代码
反思
- reduce函数如果使用大括号的情况下，别忘了使用return.
- then中包裹的是一个函数，这也就是为什么funcArr中每一个元素都是一个Promise对象。
- resolve后其实还是一个Promise对象，只有这个Promise对象then之后才会变为其他类型的值。
- reduce的第二个参数，在本次实例中其实是一个Promise对象，这一点指的我们借鉴。
