Vue 3组合式函数中封装请求取消能力的核心是将AbortController生命周期与响应式逻辑、作用域清理深度绑定：用ref管理独立控制器实例，watch参数变化时主动abort旧请求，onScopeDispose卸载时自动清理，暴露cancel方法供手动调用，并统一处理isCancel错误。
在 Vue 3 组合式函数中封装统一的请求取消能力，核心是把 AbortController 的生命周期与组合式函数的响应式逻辑、作用域清理深度绑定。不是简单地“每次请求 new 一个 controller”，而是让取消行为可复用、可预测、自动清理。
用 ref 管理单个控制器实例
每个组合式函数实例应持有自己的 AbortController，避免多个请求互相干扰。用 ref 存储它，便于在参数变化或组件卸载时主动 abort：
- 声明
const abortController = ref(null) - 每次发起新请求前，先调用
abortController.value?.abort()清掉旧请求 - 再新建控制器并赋值：
abortController.value = new AbortController() - 把
signal: abortController.value.signal传给 axios 或 fetch
监听参数变化自动取消旧请求
搜索、分页、筛选等场景下，用户输入频繁，必须在参数变更时立即终止上一次请求。用 watch 监听关键响应式变量（如 searchQuery 或 page）：
- 在
watch回调里执行abortController.value?.abort() - 注意：不要在 watch 内直接发请求，只负责取消；请求逻辑应由独立方法触发（如
fetchData()） - 如果参数是对象或数组，需用
deep: true或JSON.stringify做浅比较防误触发
组件卸载时自动清理
防止内存泄漏和错误回调执行，必须在组件销毁前调用 abort()。Vue 提供了 onScopeDispose（推荐）或 onBeforeUnmount：
立即学习“前端免费学习笔记（深入）”；
-
onScopeDispose(() => abortController.value?.abort())更契合组合式函数作用域语义 - 若函数被多次调用（如嵌套使用），
onScopeDispose能确保每次实例都独立清理 - 不建议仅依赖
onBeforeUnmount，因为它属于组件级钩子，无法覆盖函数级复用场景
返回可手动触发的取消方法
除了自动取消，业务常需要显式中断（比如点击“取消”按钮）。组合式函数应暴露一个取消函数：
- 返回对象中加入
cancel: () => abortController.value?.abort() - 该函数可直接绑定到 UI 按钮：
@click="cancel" - 调用后建议重置
abortController.value = null，避免重复 abort 报错 - 配合 loading 状态，取消后可设
isLoading.value = false
不复杂但容易忽略的是信号与错误的对应处理：catch 中要区分 axios.isCancel(err) 和真实网络错误，避免把取消当成异常上报。封装时统一做这层判断，调用方就不用重复写了。
