异步函数返回后，Javascript 不会在等待的调用后立即执行代码（它在中间执行其他操作）

Question

我将首先展示预期的输出，这既是从合理的角度来看，也是因为如果函数不是

async

，就会发生这种情况。

about to resolve
about to return from foo
code right after awaited return from foo
about to return from bar
code right after awaited return from bar

但是在从函数返回和执行调用者中的下一行代码之间，Javascript 会交错其他代码，从而导致以下结果：

about to resolve
about to return from foo
about to return from bar
code right after awaited return from foo
code right after awaited return from bar

我想知道是否有办法阻止它。我需要在异步函数返回后立即执行调用者中的下一行代码。

这是以下代码的输出：

async function caller(cb) {
    await cb();
    console.log(`code right after awaited return from ${ cb.name }`);
}

const { promise, resolve } = Promise.withResolvers();

async function foo() {
    await promise;
    console.log('about to return from foo');
}

async function bar() {
    await promise;
    console.log('about to return from bar');
}

caller(foo);
caller(bar);

console.log('about to resolve');
resolve();

Answer 1

我想知道是否有办法预防。

不，不在可移植 JavaScript 中。使用

await

是明确选择让出控制权并在 Promise 决定时恢复，这必然涉及您无法在本地控制的微任务队列中的微任务。

即使在您可以依赖微任务的特定顺序的情况下，这样做也会产生代码味道。您应该等待任何您明确依赖的操作。