TypeScript中await异步父类方法未执行后续代码问题解析

定义的类代码 #

class X {
    constructor() {
    }

    public async doSomething(): Promise<string> {
        console.log('x')
        return 'x'
    }
}

class Y extends X {
    constructor() {
        super()
    }

    public override async doSomething(): Promise<string> {
        console.log('y before')
        await super.doSomething()
        console.log('y after')
        return 'y'
    }
}

执行代码 #

const y = new Y()
y.doSomething()

预期输出 #

y before
x
y after

实际输出 #

y before
x

问题原因 #

doSomething是异步方法，调用后会立即返回一个Promise，await super.doSomething()之后的console.log('y after')属于Promise的微任务回调逻辑，会被放到事件循环的微任务队列中等待执行。如果当前脚本执行完毕后没有其他同步代码，程序会直接终止，事件循环来不及处理微任务队列里的后续逻辑，导致y after无法打印。

当你添加后续代码时，同步代码的执行时间被拉长，事件循环有机会处理微任务队列，y after就会被正常打印。

解决办法 #

方法1：用await等待异步方法完成

把执行逻辑放到async函数中，通过await等待Promise执行完成：

async function execute() {
  const y = new Y()
  await y.doSomething()
}
execute()

方法2：通过then()绑定回调

给返回的Promise添加then回调，确保后续逻辑被触发：

const y = new Y()
y.doSomething().then(() => {
  // 可处理返回结果，也可留空，核心是让Promise的后续逻辑执行
})

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