Vue 3 中用 AbortController 终止请求需每次新建实例，响应式变化时取消旧请求、组件卸载时清理、捕获 AbortError 忽略处理。
在 Vue 3 中用 AbortController 终止正在进行的请求，关键不是“强行掐断网络”，而是让当前请求感知到中止信号，并提前退出后续逻辑。核心在于：每次请求配一个独立的 AbortController，在新请求发起前取消旧的，在组件卸载时清理当前的，同时正确处理 AbortError。
每次请求新建 controller，不复用
AbortController 实例只能调用一次 abort()，之后它的 signal.aborted 永远为 true。若把已 abort 的 signal 再传给新请求，该请求会立刻失败。
- ✅ 正确做法：每次调用
fetch或axios.get前，都执行new AbortController() - ❌ 错误做法：全局声明一个 controller，反复调用
abort()并重用其 signal - 示例：
const controller = new AbortController(); fetch('/api/search', { signal: controller.signal })
响应式参数变化时主动取消上一轮请求
比如搜索框输入关键词，用户连打 “vue”，你不想让 “v”、“vu”、“vue” 三个请求都跑完——后发的应取消前两个。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 用
watch监听关键词 ref（如searchTerm） - 在 watch 回调里先检查是否存在待取消的 controller，调用
.abort() - 再创建新 controller 发起请求
- 注意：不要在
await后还操作已销毁组件的状态（可加if (!isRef(...)) return防御）
组件卸载时自动清理当前请求
用户快速跳转路由，组件实例被销毁，但请求还在飞，回调里更新 ref 就会报错或写入无效状态。
立即学习“前端免费学习笔记（深入）”；
- 推荐使用
onScopeDispose（Vue 3.4+），它在组合式函数作用域销毁时触发，比onBeforeUnmount更精准 - 在 setup 顶层或 composable 内注册：
onScopeDispose(() => controller?.abort()) - 如果用
onBeforeUnmount，需确保 controller 是响应式引用或闭包变量，能被访问到
捕获 AbortError，避免误报异常
调用 controller.abort() 后，fetch 或 axios 会 reject 一个 DOMException，err.name === 'AbortError'；axios 还可能抛出 CanceledError（取决于版本和配置）。
- 必须在
catch中显式判断：if (err.name === 'AbortError') { /* 忽略 */ } - axios 用户建议统一用
axios.isCancel(err)判断，兼容性更好 - 不处理的话，控制台会显示红字错误，toast 可能弹“请求失败”，影响体验
