Vue 3 中取消请求报错的根本原因是 Promise 被 reject 后未捕获，需用 axios.isCancel() 显式判断并忽略取消错误，仅对非取消错误（如网络异常、500）做真实处理，AbortController 场景下还需额外判断 AbortError。
Vue 3 中取消请求时出现 Uncaught (in promise) cancel 这类控制台报错，根本原因不是请求被取消本身，而是 Promise 被 reject 后未被正确捕获。只要 Promise 拒绝状态没有被处理，浏览器就会抛出未捕获异常。关键在于让“取消”成为受控的、静默的流程，而不是放任它漏到全局。
明确区分取消错误和其他业务错误
axios 的 isCancel() 工具函数就是为此设计的。在 catch 块中必须优先判断是否为取消错误，是则直接忽略，不执行任何日志或提示：
- 不要写
console.error(err)或this.$message.error(err.message)一类无差别兜底逻辑 - 必须用
if (axios.isCancel(err)) { /* 忽略 */ }显式拦截 - 只有非取消的错误（如网络断开、500、超时）才走真正的错误处理路径
确保每个异步请求都有对应的错误处理分支
使用 async/await 时，try/catch 是必需的，但仅靠它还不够——catch 块里仍要调用 axios.isCancel：
- 错误写法：
catch (err) { console.log(err) }→ 取消错误照样打日志、触发报错 - 正确写法：
catch (err) { if (!axios.isCancel(err)) { /* 处理真实错误 */ } } - 如果用了封装的请求函数（如
useRequest），确保该函数内部已做 cancel 判断，外部调用无需重复处理
避免在响应拦截器中误将取消当失败上报
很多项目会在 axios 响应拦截器统一处理错误，比如自动弹出提示或上报监控系统。这时要特别注意：
立即学习“前端免费学习笔记（深入）”；
- 在
response.interceptors.error里第一行就判断axios.isCancel(error) - 如果是取消，直接
return Promise.reject(error)终止后续拦截逻辑，不触发任何副作用 - 切勿在此处调用
Sentry.captureException()或console.warn()等操作
AbortController 场景下也要守好信号边界
即使你用的是标准 AbortController（推荐方式），fetch 或 axios 都会把 abort 触发为 TypeError: cancelled 类型错误。它不会自动被 axios.isCancel() 识别，所以需额外适配：
- 检查
error.name === 'AbortError'或error.code === 'ABORT_ERR' - 在 catch 中补充判断：
if (error.name === 'AbortError') { return; } - 若同时支持 CancelToken 和 AbortController，建议统一封装一个
isRequestCancelled(error)工具函数
