Vue中组件卸载时自动中断请求应使用AbortController，通过在统一请求函数预留controller透传入口，在setup/onMounted中创建、onUnmounted中abort，并在Vue 2中用data声明+beforeDestroy清理。

Vue 中实现组件卸载时自动中断请求，关键在于把请求生命周期和组件生命周期对齐。核心不是“手动取消”，而是建立一种可追踪、可释放的请求管理机制。现在主流做法已转向 `AbortController`，它更标准、更易维护，也兼容 Vue 2 和 Vue 3。

用 AbortController 替代 CancelToken

Axios 自 v0.22.0 起正式推荐 `AbortController`，旧的 `CancelToken` 已被标记为 deprecated。新方式更符合浏览器原生规范，且无需额外维护 token 实例。

• 在发起请求时传入 signal：由 new AbortController().signal 生成
• 组件销毁时调用 abort()：触发所有关联请求中止
• 请求被取消后，Axios 会抛出 axios.isCancel(error) 为 true 的错误，可安全忽略或做日志记录

封装 request 函数支持 controller 透传

不要让每个组件都 new AbortController，而是在统一请求函数里预留入口，让调用方按需传入：

export default function request({ method = 'get', url, data, params, controller }) {
  const config = { method, url, data, params };
  if (controller) config.signal = controller.signal;
  return service(config);
}

这样既保持了灵活性（搜索联想、表单提交等场景可复用 controller），又避免污染基础实例。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

Vue 3 组合式 API 中自动绑定与清理

在 setup 或 onMounted 中创建 controller，并在 onUnmounted 中 abort：

立即学习“前端免费学习笔记（深入）”；

• 用 ref 或 let 存储 controller 实例，确保能被卸载钩子访问
• 每次发请求前检查是否已 abort，避免重复调用 signal
• 错误处理中用 if (error.name === 'CanceledError' || axios.isCancel(error)) 判断是否主动取消

Vue 2 选项式 API 的兼容写法

虽然 Vue 2 默认不支持 Composition API，但可通过插件或生命周期钩子模拟类似行为：

• 在 data 中声明 abortController: null
• 在 mounted 或方法内初始化：this.abortController = new AbortController()
• 在 beforeDestroy（Vue 2）或 unmounted（Vue 3）中执行 this.abortController?.abort()
• 请求时传入 { signal: this.abortController.signal }

不复杂但容易忽略