babel-plugin-auto-cancel

一个 Babel 插件，自动为异步函数在 await 处增加取消判断，目前仅适用于 watchEffect 场景。

背景

在使用 Vue 的 watchEffect 或类似 API 时，常见问题是当监听被清理（组件卸载或依赖变化）时，内部的异步操作可能仍在继续执行，导致内存泄漏或错误的状态更新。

本插件自动转换代码，确保当 watchEffect 被清理时，所有内部的异步操作也会被正确取消，并且不会继续执行后续代码。

安装

pnpm add babel-plugin-auto-cancel --save-dev

使用方法

在 Babel 配置文件中添加插件：

// babel.config.js
module.exports = {
  plugins: ['babel-plugin-auto-cancel']
};

工作原理

插件会：

1. 检测 watchEffect 调用和其中的异步函数
2. 为异步函数添加取消状态跟踪
3. 转换 await 表达式，使其在取消状态下不继续执行
4. 在函数调用间传递取消上下文

转换示例

转换前：

import { ref, watchEffect } from 'vue'

const state = ref()

watchEffect(async (onCleanup) => {
  const value = await fetch()
  state.value = value
  
  // 这些代码在取消后不应该执行
  await someOtherAsyncOperation()
  
  onCleanup(() => {
    // 清理逻辑
  })
})

转换后：

import { ref, watchEffect } from 'vue'

const state = ref()

watchEffect(__autoCancel_globalWatchEffectWrapper__(async function(onCleanup) {
  let _state = /* ... */
  const value = await fetch().then(__autoCancel_globalThen__(_state))
  state.value = value
  
  // 如果已取消，这里不会执行
  await someOtherAsyncOperation().then(__autoCancel_globalThen__(_state))
  
  onCleanup(() => {
    // 清理逻辑
  })
}))

// 插入的工具函数
let __autoCancel_globalWatchEffectWrapper__ = /* ... */
let __autoCancel_globalCallWithContext__ = /* ... */
let __autoCancel_globalThen__ = /* ... */

许可证

MIT