JavaScript异步函数返回后后续代码延迟执行的解决方法咨询

预期与实际执行差异 #

在非异步场景或使用done回调的情况下，预期的执行顺序是：

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

问题核心是：异步函数返回后，调用者的后续代码不会立即执行，而是会被同队列的其他微任务插队。我们需要让caller中await cb()之后的代码，在cb执行完成后立刻运行。

原测试代码 #

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();

解决方案 #

方案1：让回调直接触发后续逻辑

修改caller和回调函数的结构，让回调执行完成后立刻调用后续逻辑，避免依赖await拆分微任务：

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

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

function foo(done) {
    promise.then(() => {
        console.log('about to return from foo');
        done();
    });
}

function bar(done) {
    promise.then(() => {
        console.log('about to return from bar');
        done();
    });
}

caller(foo);
caller(bar);

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

这个方案中，每个回调的打印操作和后续逻辑被放在同一个微任务里，确保顺序符合预期。

方案2：串行化调用（适合不需要并行执行的场景）

如果可以接受两个caller调用串行执行，直接按顺序await即可：

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');
}

// 用自执行异步函数串行调用
(async () => {
    await caller(foo);
    await caller(bar);
})();

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

此方案会先完成foo的整个调用流程，再开始bar的流程，自然符合预期顺序，但代价是失去了并行性。

方案3：保留async/await的同时绑定后续逻辑

如果想保留async/await语法，可以让回调接收后续逻辑作为参数，在自身执行完成后立刻调用：

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

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

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

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

caller(foo);
caller(bar);

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

这种方式既保留了async语法，又让后续逻辑和回调的核心代码处于同一个微任务，避免被插队。

原理说明 #

JavaScript的微任务队列是先进先出的：当promise被resolve后，foo和bar中await promise的后续代码会先被加入微任务队列并依次执行；之后cb()返回的Promise完成，才会把caller中await后的代码加入队列。这就是为什么原代码中会先打印两个about to return，再打印后续内容。

通过将后续逻辑和回调的核心代码绑定到同一个微任务中，就能打破这种队列顺序，实现预期的执行流程。

内容的提问来源于stack exchange，提问作者Miguel Leon