Question

让我们考虑一下我们有N个异步函数，例如：

async function1(){
  return await fetch(...);
}
.
.
.
async functionN(){
  return await fetch(...);
}

然后我们有一个类似的功能：

async wrapper(){
   let var = await fetch(...);
   function1();
   .
   .
   .
   functionN();
}

这是否会创建一个大的微任务队列，从而在所有被调用函数解析其awaits之前有效地阻止ui线程转到下一个任务？

Answer 1

在答应 resolve 之前，微任务队列中什么都没有。在此之前，可以处理其他任务和（UI）事件。

这是因为await运算符将使相应的async函数立即返回，从而允许其他JS代码执行。在您的情况下，承诺由fetch返回，实际上，它不会立即解决。因此，这里没有任何障碍。

然后，当HTTP响应使fetch承诺得以解决时，确实会创建一个微任务，当执行该微任务时，将还原相应的async函数的执行上下文。您的示例函数没有其他事情要做，因此可以很快完成。

请注意，最初是否从其他函数中调用此函数并不重要：在此阶段，仅还原该特定函数的执行上下文（已解决等待的诺言），而无需任何预先存在的调用堆栈。因此，它不会再次返回包装函数。这已经在第一阶段发生，并且不会再次发生。

然后再次进行免费的事件处理，直到下一个fetch承诺得到解决为止。因此，它继续。