昨天看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