TypeScript异步函数取消机制实现遇类型无法取消收窄问题

一、修复当前代码的类型错误 #

你碰到的报错是TypeScript类型收窄机制导致的：在this.state = 'running'执行后，TypeScript会认为this.state的类型已被收窄为'running'，因此后续的this.state === 'stopped'会被判定为无意义的比较。但实际场景中，await会让出执行权，外部代码（比如示例中的setTimeout）完全可以修改实例的state属性。

两种可行的修复方式： #

1. 类型断言强制类型检查
   直接通过类型断言告诉TypeScript，this.state仍可能是两种状态之一：

   if ((this.state as 'running' | 'stopped') === 'stopped') {
       return;
   }
   

2. 封装状态读取方法
   把状态读取封装成类的方法，TypeScript不会对方法的返回值做持久化的类型收窄：

   class A {
       state: 'running' | 'stopped'
       constructor() {
           this.state = 'stopped'
       }
       private getCurrentState() {
           return this.state;
       }
       async a() {
           this.state = 'running'
           for (let i = 0; i < 10000; i++) {
               console.log(`i: ${i}`)
               if (this.getCurrentState() === 'stopped') {
                   return;
               }
               await new Promise<void>((resolve) => {
                   setTimeout(() => resolve(), 1000)
               })
           }
       }
   }
   

二、更优雅的异步任务取消方案：使用AbortController #

手动维护state的方式容易出现检查遗漏，且代码冗余。推荐使用标准的AbortController API实现异步任务取消，这是当前JavaScript/TypeScript生态中处理异步取消的最佳实践。

示例代码： #

class A {
    private abortController?: AbortController;

    async start() {
        this.abortController = new AbortController();
        const signal = this.abortController.signal;

        try {
            for (let i = 0; i < 10000; i++) {
                console.log(`i: ${i}`);
                
                // 检查是否收到取消信号
                if (signal.aborted) {
                    console.log('任务已取消');
                    return;
                }

                // 将信号传入异步操作，支持中途取消并清理资源
                await new Promise<void>((resolve, reject) => {
                    const timer = setTimeout(resolve, 1000);
                    signal.addEventListener('abort', () => {
                        clearTimeout(timer);
                        reject(new Error('任务被取消'));
                    });
                });
            }
        } catch (err) {
            if (err instanceof Error && err.message === '任务被取消') {
                // 自定义取消后的逻辑
                return;
            }
            // 处理其他异常
            throw err;
        } finally {
            this.abortController = undefined;
        }
    }

    stop() {
        this.abortController?.abort();
    }
}

const a = new A();

(async () => {
    setTimeout(() => a.stop(), 5000);
    try {
        await a.start();
    } catch {}
    console.log('finished');
})();

核心优势： #

• 遵循标准API，无需手动维护状态，代码简洁可靠
• 可直接将signal传入原生支持取消的API（如fetch），无需额外适配
• 取消时可同步清理资源（如示例中的定时器），避免内存泄漏

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