为何无限递归的async函数不会引发栈溢出？

Great question! Your intuition that this doesn't trigger a stack overflow is spot-on, and your comparison to the setImmediate example is a perfect way to frame the core idea—let's break down the exact mechanics of how async/await makes this work.

First, let's contrast this with the synchronous recursion that does cause stack overflow:

• In a standard sync recursive function like const foo = () => { foo(); } foo(), each call to foo happens before the previous one finishes. This means every new call gets stacked on top of the last, and the call stack keeps growing until it hits the runtime's limit and throws an overflow error.

Now let's walk through your async function step by step:

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

Step-by-Step Execution Flow #

1. Initial foo() call: The function is added to the call stack, and we execute up to the await Promise.resolve("foo") line.
2. Await pauses and exits the stack: Even though Promise.resolve("foo") resolves immediately, await does two critical things:
   • It pauses the current foo instance, saving its state (like where to resume execution and the upcoming value of txt).
   • It makes the foo function return a Promise right away. At this point, the original foo call is removed from the call stack—your stack is completely empty.
3. Microtask queue runs the remaining code: Once the call stack is clear, JavaScript processes the microtask queue (where the code after await gets queued). It resumes the paused foo instance:
   • Assigns txt = "foo" and logs it.
   • Calls foo() again—this is a brand new function call, which gets added to the now-empty call stack.
4. Cycle repeats: This new foo call hits the await line, pauses, exits the stack, and the process starts over.

Why This Avoids Stack Overflow #

The core reason is that each recursive call to foo() happens after the previous instance of foo has fully exited the call stack. Unlike synchronous recursion, where calls pile up on the stack, async recursion uses JavaScript's event loop to schedule the next call after the current one has finished.

Your setImmediate example works on the same principle—with one minor difference:

• setImmediate queues its callback in the macrotask queue (while await uses the microtask queue). But the key behavior is identical: the recursive call is scheduled to run later, after the current function has left the stack, so the stack never accumulates multiple layers of the same function.

To put it simply: Async functions with await break the recursive chain by deferring the next call to the event loop, ensuring the call stack is always cleared before the next iteration runs.

内容的提问来源于stack exchange，提问作者Raju Ahmed