关于Promise嵌套then和多级then的解析

Promise.resolve().then(function F1() {
    console.log('promise1')
    Promise.resolve().then(function F4() {
        console.log('promise2');
        Promise.resolve().then(function F5() {
            console.log('promise4');
        }).then(function F6() {
            console.log('promise?');
        })
    }).then(function F7() {
        console.log('promise5');
    })
}).then(function F2() {
    console.log('promise3');
}).then(function F3() {
    console.log('promise6');
})

预期打印结果

promise1
promise2
promise3
promise4
promise5
promise6
promise?

执行图

分析

最开始代码执行，遇到Promise，直接执行，将回调函数F1扔进了Micro Task中。执行栈为空，开始执行Micro Task中的代码，为第一个快照。

执行函数F1，打印出Promise1，执行Promise.resolve()，将函数F4扔进了Micro Task中；此时状态已更改为resolve，将then中的函数F2扔进Micro Task，为第二个快照。

执行函数F4，打印出promise2，执行Promise.resolve()，将函数F5扔进了Micro Task中；F4执行完毕，状态更改，将函数F7扔进Micro Task中。

执行函数F2，打印出promise3,状态更改，将函数F3扔进了扔进了Micro Task中，为第三个快照。

执行函数F5，打印出promise4, 状态更改，将函数F6扔进了Micro Task中；

执行函数F7，打印出promise5；

执行函数F3，打印出promise6，，为第四个快照。

执行函数F6，打印出promise?，结束。

文章转至于简书