使用 async/await 时调用堆栈的工作

Question

使用 async/await 函数时调用堆栈的行为如何？

function resolveAfter2Seconds() { // taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

const asyncFuntion=async()=>{
  const result = await resolveAfter2Seconds();
  console.info("asyncFuntion finish, result is: ", result);
}

const first = async()=>{
    await asyncFuntion();
    console.log('first completed');
        debugger;
}

const second = ()=>{
    console.log('second completed');
        debugger;
}

function main(){
    first();
    second();
}


main();

在上面的代码中，当在 second() 中遇到第一个断点时，我可以看到调用堆栈包含 main() 和 second()。在 first() 中的第二个断点期间，调用堆栈包含 main() 和 first()。

在第一个断点期间 first() 发生了什么。推到哪里去了？假设 asyncFunction() 需要一些时间才能完成。

请有人帮忙。

Answer 1

首先，当您到达您在second 中命中的断点时，first 已经执行并且不再在堆栈中。

当我们进入first 时，我们立即点击了await asyncFunction()。这告诉 JavaScript 不要阻塞调用的结果，但在我们等待的时候可以随意寻找其他事情要做。 Javascript 是做什么的？

嗯，首先，它确实调用了asyncFunction()。这将返回一个承诺，并将启动一些稍后将解决它的异步过程。现在我们不能继续下一行first（即console.log('first completed')），因为我们的await意味着在promise实现之前我们不能继续，所以我们需要在这里暂停执行，然后去找与我们的空闲时间有关的其他事情。

所以，我们查找堆栈。我们仍然在来自 main 的 first() 调用中，现在我们可以从该调用中返回一个 Promise，我们将在异步执行完成时解决它。 main 忽略该承诺返回值，因此我们继续使用 second()。执行完second 后，我们会回顾调用它的任何内容，并以所有人期望的方式继续同步执行。

然后，在未来的某个时候，我们的承诺会实现。也许它正在等待 API 调用返回。也许它正在等待数据库回复它。在我们的示例中，它正在等待 2 秒超时。无论它在等待什么，现在都可以处理了，我们可以取消暂停 first 调用并继续在那里执行。它不是从main“调用”的——在内部函数被拾取，就像回调一样，但关键是用一个全新的堆栈调用，一旦我们完成调用函数的其余部分，它将被销毁。

鉴于我们在一个新堆栈中，并且早就离开了“主”堆栈框架，当我们在其中遇到断点时，main 和 first 如何再次进入堆栈？

长期以来，如果您在调试器中运行代码，简单的答案是它们不会。你只要得到你所在的函数，调试器就会告诉你它是从“异步代码”或类似的东西中调用的。

然而，现在一些调试器可以跟随等待的代码回到它正在解决的承诺（请记住，await 和async大部分只是承诺之上的语法糖）。换句话说，当您等待的代码完成并且引擎盖下的“承诺”得到解决时，您的调试器有助于确定堆栈“应该”是什么样子。它显示的内容实际上与引擎最终调用该函数的方式并无太大相似之处——毕竟，它是在事件循环之外调用的。但是，我认为这是一个有用的补充，使我们所有人都能保持代码的思维模型比实际发生的要简单得多！

一些关于它是如何工作的进一步阅读，其中涵盖的细节比我在这里要多得多：

• Zero-cost async stack traces
• Asynchronous stack traces