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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章