美文网首页
关于Promise嵌套then和多级then的解析

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

作者: 蜻蜓路过风 | 来源:发表于2020-01-17 16:50 被阅读0次
    最近在看事件循环机制,刚好看到这个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?
    
    先看执行图
    Micro Task快照
    接下来是分析
    1. 最开始代码执行,遇到Promise,直接执行,将回调函数F1扔进了Micro Task中。执行栈为空,开始执行Micro Task中的代码,为第一个快照。
    2. 执行函数F1,打印出Promise1,执行Promise.resolve(),将函数F4扔进了Micro Task中;此时状态已更改为resolve,将then中的函数F2扔进Micro Task,为第二个快照。
    3. 执行函数F4,打印出promise2,执行Promise.resolve(),将函数F5扔进了Micro Task中;F4执行完毕,状态更改,将函数F7扔进Micro Task中。
      执行函数F2,打印出promise3,状态更改,将函数F3扔进了扔进了Micro Task中,为第三个快照。
    4. 执行函数F5,打印出promise4, 状态更改,将函数F6扔进了Micro Task中;
      执行函数F7,打印出promise5;
      执行函数F3,打印出promise6,,为第四个快照。
    5. 执行函数F3,打印出promise?,结束。

    相关文章

      网友评论

          本文标题:关于Promise嵌套then和多级then的解析

          本文链接:https://www.haomeiwen.com/subject/ffzczctx.html