javascript - 使用 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()。这将返回一个 promise ，并将启动一些稍后将解决它的异步过程。现在我们不能继续 first 的下一行(即 console.log('first completed'))因为我们的 await意味着我们不能在 promise 完成之前继续执行，所以我们需要在这里暂停执行，并找到其他空闲时间做的事情。

所以，我们查找堆栈。我们仍然在来自 main 的 first() 调用中，现在我们可以从该调用返回一个 promise ，我们将在异步执行完成时解决这个问题。 main 忽略 promise 返回值，所以我们继续 second()。一旦我们执行了 second，我们就会回顾调用它的任何内容，并以每个人都期望的方式继续同步执行。

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

鉴于我们在一个新的堆栈中，并且早已离开“main”堆栈框架，main 和 first 如何再次出现在堆栈中当我们在里面遇到断点时？

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

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

一些关于它如何工作的进一步阅读，其中涵盖了比我在这里所能看到的更多的细节:

• > Zero-cost async stack traces
• > Asynchronous stack traces