为什么无限递归异步函数不会导致堆栈溢出？

Question

我在想当异步函数无限递归调用自己时会发生什么。我的想法是它不会导致堆栈溢出。但我无法准确指出为什么会这样。

const foo = async () => {
    const txt = await Promise.resolve("foo");
    console.log(txt);
    foo();
}

foo();

上面的代码无限打印“foo”而不溢出堆栈。

我的想法是代码在概念上类似于以下，它不会导致堆栈溢出，因为对foo()的递归调用在回调内部，对foo()的原始调用将在此之前返回。

const bar = () => {
    console.log("foo");
    foo();
}

const foo = () => {
    setImmediate(bar);
}

foo();

我正在寻找关于异步函数情况的确切答案。

Answer 1

这个函数是

的语法糖

const foo = () => 
  Promise.resolve(
    Promise.resolve("foo")
    .then(txt => {
      console.log(txt);
      foo();
    })
  );

foo();

这本身可以用更少的依赖项重写为

const foo = () =>
  queueMicrotask(() =>
    queueMicrotask(() => {
      console.log("foo");
      foo();
    })
  );
foo();

Window.queueMicrotask 是一种全新的方法，它为我们提供了一种触发 queue a microtask 操作的方法，该操作由 Promise.resolve 和 await 触发。
基本上，此操作在当前执行结束时推送微任务，但在当前事件循环结束之前。

算法第六点读取

将任务的脚本评估环境设置对象集设置为空集。

这就是为什么这里没有堆栈溢出的原因。但是，由于您从未退出事件循环，您正在阻止浏览器。

Answer 2

您的代码不会产生堆栈溢出，因为当您在函数内部调用 foo 时，它不是 awaited。如果你写await foo();，那么它应该会导致堆栈溢出。

考虑以下两种情况：

案例 1 这里根据你的代码。从a() 它将调用foo 而没有await。那么当它调用foo() 时会发生什么，因为它是async 函数，它would be scheduled to run after the current execution resolves. Or even more precisely, it will be queued for later execution 和立即a() 也将从下一行继续。可以看到a()先结束的输出，不等待foo的调用栈返回；

const foo = async () => {
    const txt = await Promise.resolve("foo");
    console.log(txt);
}

const a = async () => {
    const txt = await Promise.resolve("a");
    console.log(txt);
    foo();
    console.log("-- ENd of a() --");
}

a();

案例 2 在a() 内部，它将调用foo 和await。您可以看到a() 正在等待从foo() 返回的输出，那么它只会在下一行继续。

const foo = async () => {
    const txt = await Promise.resolve("foo");
    console.log(txt);
}

const a = async () => {
    const txt = await Promise.resolve("a");
    console.log(txt);
    await foo();
    console.log("-- ENd of a() --");
}

a();