组件卸载时自动取消请求需在onBeforeUnmount或onScopeDispose中调用AbortController.abort()；参数变更时通过watch配合onCleanup实现即时取消；Axios取消错误应统一用axios.isCancel(err)判断。
组件卸载时自动取消未完成的请求，关键是在 组件销毁前触发 abort()，并确保控制器实例可被正确访问和调用。Vue 3 提供了明确的生命周期钩子来实现这一点，无需手动维护全局状态或额外判断。
用 onBeforeUnmount 清理单个请求
这是最直接、最常用的方式：在 setup 中创建 AbortController，把实例保存在 ref 或局部变量中，然后在 onBeforeUnmount 中调用 abort()。
- 每次发起新请求前，先检查旧 controller 是否存在，存在则调用
abort() - 请求完成后（无论成功或失败），将 controller 置为
null或清空引用，避免重复 abort -
onBeforeUnmount保证组件卸载时兜底取消，防止内存泄漏和无效回调执行
用 onScopeDispose 替代（推荐 Vue 3.4+）
如果使用的是 Vue 3.4 或更高版本，onScopeDispose 是更语义化、更安全的选择。它在当前 effect scope 销毁时执行清理，天然适配组合式函数的生命周期。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 在自定义组合式函数（如
useApi）内部调用onScopeDispose，无需暴露 controller 给外部 - 即使组件未挂载完成就销毁（比如路由快速跳转），也能可靠触发
- 比
onBeforeUnmount更贴近逻辑作用域，避免跨组件误清理
配合 watch 实现参数变更时自动取消
当请求由响应式数据（如搜索关键词）驱动时，仅靠卸载清理不够——用户还没离开页面，但已输入新关键词，旧请求应立即中止。
- 用
watch监听参数变化，在回调中调用上一个 controller 的abort() - watch 回调第三个参数
onCleanup可用于注册清理函数，它会在新回调执行前或组件卸载时自动触发 - 这样既能响应参数更新，又能覆盖卸载场景，一鱼两吃
注意 Axios 的错误识别方式
取消后 axios 会抛出特定错误，必须显式处理，否则会进入 catch 并显示错误提示：
- 新版 axios（≥0.22）使用
signal后，取消时抛出的错误name是"AbortError"，不是"CanceledError" - 推荐统一用
axios.isCancel(err)判断，它内部已兼容两种情况 - 不要忽略该错误，也不应把它当作业务异常上报
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
