通过描述微任务队列和调用堆栈架构来解释以下代码的输出

Question

这是代码：

function SSD() {
    console.log('SSD')
}

async function createData() {
    let status = undefined
    try {
        const res = await fetch('https://api.github.com/users/Soumya-0x000')
        status = res.status
    } catch (error) {
        console.error('error')
    }
    return status
}  //Micro task queue has high priority

setTimeout(() => {
    console.log(!undefined)
}, 1000);    //callback queue / task queue has low priority

SSD()

createData().then((code) => {
    console.log('Status code: ', code)
})

console.log('C')

Promise.resolve().then(() => console.log('D'))    //Micro task queue has high priority

console.log('E')

我认为输出应该如下所示：

SSD
C
E
Status code:  200
D
true

但实际输出是：

SSD
C
E
D
Status code:  200
true

API 没问题。 现在请有人解释一下，为什么以及如何在打印“状态代码：200”之前打印“D”。

我期望输出为：

SSD
C
E
Status code:  200
D
true

因为 createData() 首先在微任务队列中排队，然后它才会到达已解决的承诺。确实是同步任务先执行，Promise是同步的。但是 createData() 在微任务队列中排在第一位，因此应该首先解析它，并且应该先打印

Status code:  200

，然后打印

D

。但这并没有发生。 请解释一下........

Answer 1

但是 createData() 在微任务队列中排在第一位，因此应该首先解析它，并且应该先打印 Status code: 200 然后是 D

仅当

createData().then(...)

函数返回的 Promise 被解析时，

createData

的回调函数才会入队到微任务队列中。在那之前，它只是注册为履行处理程序。

脚本同步执行结束后，您将有两个 Promise：一个处于待处理状态，由

createData

返回，另一个处于已解决状态，由

Promise.resolve()

返回。

由于第二个 Promise 已经得到解决，因此它的履行处理程序首先会排队到微任务队列中。