如何让自定义thenable在await后同步触发后续代码？

没问题，JavaScript里完全可以通过自定义thenable来控制await后的代码执行顺序，满足你的需求。

原代码不符合预期的原因 #

你的初始代码如下：

async function test(label) {
    console.log(`BEFORE: ${label}`);
    await waitForSomething(label);
    console.log(`AFTER: ${label}`);
}

function waitForSomething(label) {
    return {
        then(onFulfilled) {
            console.log(`FULFILL: ${label}`);
            onFulfilled();
        }
    }
}

console.log('START');
test('A');
test('B');
console.log('END');

它的输出顺序是：

START
BEFORE: A
BEFORE: B
END
FULFILL: A
FULFILL: B
AFTER: A
AFTER: B

核心问题在于：

• await处理thenable时会同步调用其then方法。
• 你在then里先同步打印FULFILL，再调用onFulfilled()——但onFulfilled的作用是把async函数中await后面的代码（即AFTER的打印）放入微任务队列，而非立即执行。
• 两个test调用的then方法都是同步执行完毕的，所以所有FULFILL会先打印完成，等同步代码全部执行结束后，微任务队列里的AFTER才会批量执行。

用queueMicrotask调整顺序的解决方案 #

要让AFTER: A紧跟FULFILL: A，只需把FULFILL的逻辑也放进微任务队列，和AFTER的任务按顺序排队即可。你找到的queueMicrotask方案完全可行，调整后的代码如下：

async function test(label) {
    console.log(`BEFORE: ${label}`);
    await waitForSomething(label);
    console.log(`AFTER: ${label}`);
}

function waitForSomething(label) {
    return {
        then(onFulfilled) {
            queueMicrotask(() => console.log(`FULFILL: ${label}`));
            onFulfilled();
        }
    }
}

console.log('START');
test('A');
test('B');
console.log('END');

这段代码的执行逻辑：

• 调用then方法时，先通过queueMicrotask把FULFILL: A的打印加入微任务队列。
• 同步调用onFulfilled()，此时AFTER: A的打印会被加入微任务队列，排在FULFILL: A之后。
• 同理，test('B')的FULFILL: B和AFTER: B也会按顺序加入队列。
• 等同步代码（START、BEFORE、END）执行完毕，微任务队列按顺序执行，就能得到你想要的输出：

START
BEFORE: A
BEFORE: B
END
FULFILL: A
AFTER: A
FULFILL: B
AFTER: B

适配全局状态库场景 #

对于你提到的带全局状态的库，这种方式能保证每条异步调用链在恢复执行（即用户代码中await之后的逻辑）前，先执行你在FULFILL里的状态同步操作，避免多调用链之间的状态冲突。

你提到的TC39 async-context提案确实是更优雅的长期方案，但目前还处于Stage 2无法在生产环境使用；而让用户手动调用unwrap方法会增加使用成本，显然不如自定义thenable的方案友好。

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