async/await 中的执行顺序

Question

我一直在研究 promise、await 和 async 函数。 当我刚刚处于学习 promises 的阶段时，我偶然发现了这个：

 async function async1(){ console.log('Async 1'); await async2(); // * console.log('AFter Async 1'); } async function async2(){ console.log('FROM async 2'); } async1(); console.log('Synchronous'); //**

结果是：

Async 1
FROM async 2
Synchronous
AFter Async 1

代码如何从 * 跳转到 **。 这里如何使用微任务？

Answer 1

执行您询问的特定序列（从*到** ）不涉及微任务，尽管微任务在该序列期间排队（然后稍后运行）。

async function 是同步的，直到第一次await或return （包括隐式返回，其中代码执行只是“脱离”函数的末尾）。 此时，function 返回 promise 并从调用 function 的点继续执行同步。 如果它是return或隐式返回（不是await ），则会排队等待一个微任务来解决 function 中的 promise。

我用黄色突出显示了该代码的同步部分：

在您的示例中，当您在底部调用async1时，它的同步部分运行（记录Async 1然后调用async2 ，它在其同步部分记录FROM async 2 ）； 运行async2并从中获得 promise， async1到达await并返回它自己的 promise； 然后同步执行在你调用它之后继续，记录Synchronous 。

在这个特定的例子中，在*和**部分之间，一个用于完成async2的 promise 的微任务被排队。 当您的示例中执行同步代码的任务完成时，该微任务将从微任务队列中提取并执行——这将从等待它的async1中解决 promise； async1的代码继续，记录它的日志，然后隐式返回，因此微任务排队处理该结算（在本例中为履行），并在async2微任务执行完成后从微任务队列中提取。 但是没有什么在等待promise，所以和解没有任何明显的效果。

Answer 2

async function async1(){           // 1
  console.log('Async 1');          // 2
  await async2();  // *            // 3
  console.log('AFter Async 1');    // 4
}                                  // 5
                                   // 6
async function async2(){           // 7
  console.log('FROM async 2');     // 8
}                                  // 9
                                   // 10
async1();                          // 11
console.log('Synchronous'); //**   // 12

首先，在第 11 行，执行 function async1()并立即从第 2 行记录Async 1 。

在第 3 行， await暂停async1()的执行，直到 promise 稳定，promise 稳定， FROM async 2记录，并将一个微任务放入作业队列以继续执行async1 ( async2()同步执行，因为 async没有等待表达式的 function 只会同步运行）。

现在，第 12 行执行并记录Synchronous 。 之后，由于调用堆栈为空，队列中的微任务可以继续执行，我们最终得到AFter Async 1 );