Promise 执行时序

昨天看mdn的时候对Promise的执行时序有些疑问，就看了看 js 的事件循环：

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
wait().then(() => console.log(4));

Promise.resolve().then(() => console.log(2)).then(() => console.log(3));

console.log(1);

可以先估计一下执行结果。。。

先介绍一下宏任务：script(代码块)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)

// 比如上面的这段代码本身就是一个宏任务；

微任务：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)；// 微任务会在一轮宏任务执行结束之后执行

下面开始执行上面代码（宏任务）：

1. 申明变量 wait 时同步执行 new Promise，进入promise 里面是个 setTimeout ，因为 setTimeout  不是同步的，把 setTimeout 放入另一个宏任务等待执行；

2. 然后继续向下执行 wait.then()；而上面说了 .then() 是放入微任务的，所以把 then() 放入微任务等待执行；

3. 继续向下，同步执行 Promise.resolve()，之后又是 .then() 把它放入微任务；

4. 执行console.log(1)

当前打印情况是：1

此时一个事件循环结束，去微任务里查看是否有要执行的微任务，此时微任务里有两个 .then()；第一个 .then() 的Promise 状态未执行结束；第二个 .then() 的Promise的执行状态是resolve的，那么就可以执行 第二个 .then() 了

微任务执行：

.then(() => console.log(2)).then(() => console.log(3)); // 因为then() 里面都是console，所有同步执行；

至此微任务执行结束，打印情况： 1，2，3

下面开始第二轮的宏任务：

1. 根据上述分析，此时宏任务里只有一个 setTimeout  ，所以执行 setTimeout  ；执行后它的 Promise 为 resolve 状态；

2. 宏任务为空执行结束 ；

下面开始第二轮的微任务：

1. 此时微任务里还有一个 .then() ，而且它的 Promise 已经 resolve 了，所以执行 console.log(4) 

至此所有任务都执行结束，打印情况：1，2，3，4

 

转载于:https://www.cnblogs.com/javencs/p/10481498.html