JavaScript--Promise执行顺序

代码

    <script>
      console.log(1)
      const p = new Promise((resolve) => {
        console.log(2)
        resolve()
      })
      console.log(3)
      setTimeout(() => {
        console.log(4)
      }, 0)
      p.then(() => console.log(5))
      setTimeout(() => {
        console.log(6)
      }, 0)
      console.log(7)
    </script>

输出结果

分析

正常顺序执行 -> then -> setTimeouts -> then中 setTimeouts
正常顺序执行：输出1 2 3 7；
then：输出5；
setTimeouts ：输出4 6。

拓展

参考：js 宏任务和微任务

//主线程直接执行
console.log('1');
//丢到宏事件队列中
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
//微事件1
process.nextTick(function() {
    console.log('6');
})
//主线程直接执行
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    //微事件2
    console.log('8')
})
//丢到宏事件队列中
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

输出结果

1->7->6->8->2->4->3->5->9->11->10->12

分析

首先，JavaScript 是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个任务队列。一旦当前任务执行完毕，再从队列中取出下一个任务，这也常被称为 “阻塞式执行”。

具体执行过程

首先 JavaScript 引擎会执行一个宏任务，注意这个宏任务一般是指主干代码本身，也就是目前的同步代码执行过程中如果遇到微任务，就把它添加到微任务任务队列中宏任务执行完成后，立即执行当前微任务队列中的微任务，直到微任务队列被清空。微任务执行完成后，开始执行下一个宏任务。如此循环往复，直到宏任务和微任务被清空。

宏任务：主代码块、setTimeout、setInterval、DOM事件、AJAX请求。
微任务：Promise、async/await、process.nextTick。

主代码块作为宏任务最先运行：输出1，7；
setTimeout分发到宏任务事件队列Event Queue中；
process.nextTick，Promise.then分发到微任务事件队列Event Queue中；
此时，主代码块执行完毕，即第一个宏任务执行完毕，开始执行微任务，输出 6，8；
第一个微任务执行完毕，开始执行第二个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务process.nextTick，输出2，4，3，5；
开始执行第三个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务，输出9,11,10,12。

总结

1、微任务是在宏任务的执行中产生的，所以一开始程序执行时是没有微任务的。
2、系统将微任务执行完以后，才会去执行下一个宏任务。
3、宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。
4、宿主环境提供的属于宏任务：例如setTimeout。由语言标准提供的属于微任务：例如promise.then。可以以此来区分宏任务和微任务。

参考：https://blog.csdn.net/ZHANGYANG_1109/article/details/123839466