vue中推荐用abortcontroller中断axios请求，创建controller后传signal并调abort()；canceltoken已废弃但需兼容，用source().token和source.cancel()；应配合onbeforeunmount清理、map管理重复请求、区分aborterror与业务错误。
Vue 项目中用 Axios 中断请求，核心是让请求“可取消”——不是等它失败或超时，而是主动终止。现在推荐用 AbortController，CancelToken 已被官方标记为废弃（自 axios v0.22.0 起），但老项目仍可能遇到，所以两者都得会。
AbortController：现代标准做法
这是浏览器原生 API，axios 从 v0.22.0 开始原生支持，写法简洁、类型友好、可复用性强。
- 创建控制器：
const controller = new AbortController()，获取信号signal = controller.signal - 发请求时传入 signal：
axios.get('/api/user', { signal }) - 取消时调用：
controller.abort('用户离开页面')，此时请求立即中断，catch 中捕获到的是name === 'AbortError'或axios.isCancel(error)为 true - 在 Vue 组件中，建议配合
onBeforeUnmount自动清理：
组件卸载前调一次controller.abort()，避免内存泄漏或错误回调执行
CancelToken：兼容旧项目需了解
虽已弃用，但很多存量代码还在用，原理是通过工厂函数生成 token，并把 cancel 方法存起来。
- 创建 source：
const source = axios.CancelToken.source() - 请求中配置：
axios.post('/login', data, { cancelToken: source.token }) - 取消请求：
source.cancel('重复提交')，之后再用这个 token 就会报错，必须新建 - 注意：不能直接用
new axios.CancelToken(...)手动构造，容易出错；务必用source()方式
拦截器里统一管理重复请求
实际开发中，最常见需求不是“手动点取消”，而是“输入框连打、路由切换、Tab 切换时自动取消上一个请求”。这时需要全局控制逻辑：
- 用 Map 存储当前所有 pending 请求的 key（如
GET-/user/123）和对应的 cancel 函数或 controller - 请求发出前，先根据 key 查是否有旧请求，有就 abort/cancel 它
- 响应成功或失败后，从 Map 中移除该 key，避免残留
- AbortController 方案中，key 对应的是
controller实例；CancelToken 方案中对应的是cancel函数
错误处理要区分取消和其他异常
中断不是错误，不该弹提示、不该进业务失败流程。必须显式判断：
- AbortController：
error.name === 'AbortError'或error.code === 'ERR_CANCELED' - CancelToken：
axios.isCancel(error) === true - 其他情况（网络失败、500、401 等）才走正常错误提示逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
