Async/await 承诺提供替代方案。将await重写为Promise

Question

我试图了解

await

在不同场景中的工作原理，并遇到了一个问题。

new Promise(async (resolve, reject) => {
    resolve(); 

    console.log(await Promise.resolve(7))
    
    console.log(8)
}).then(() => console.log(3))

此代码记录

7, 8, 3

- 因此它不会将 console.log 放入微任务队列。 （这就是我不明白的地方。
所以，我尝试将

await

行重写为 Promise 语法：

new Promise(async (resolve, reject) => {
    resolve(); 

    const pr = new Promise((res) => {
        res(7)
    })
    pr.then((num) => console.log(num))
    
    console.log(8)
}).then(() => console.log(3))

但现在它会将

then

放入微任务队列并首先记录

8

。
日志：

8, 7, 3

.

问题是：为什么我尝试重新创建

console.log(await Promise.resolve(7))

是不正确的？
为什么await Promise.resolve()会立即执行？

Answer 1

规则很简单：

await

将其下面的所有代码以及其表达式之外的所有内容都放在微任务中的行上。 所以你的

console.log(8)

确实被放入了一个微任务中，但正如你可以分析的那样，它被放入了最后一个微任务

new Promise(async (resolve, reject) => {
    resolve();

    console.log(await Promise.resolve(7)) // await puts both the console.log's into the first microtask
    
    console.log(8)
}).then(() => console.log(3)) // then puts the callback into the second microtask

让我们稍微改变一下以了解更多它的工作原理：

<script type="module">

new Promise((resolve, reject) => {
    resolve(); 
}).then(() => console.log(3)) // then puts the callback the first microtask

await 1; // we replaced async callback with that, puts the below code into a microtask (let's not count it)

console.log(await Promise.resolve(7)) // both the console.log's are put into the second microtask

console.log(8)

</script>