watchEffect 配合 AbortController 是 Vue 3 中处理异步请求竞态最简洁有效的方式，核心是在每次副作用重新执行前通过 cleanup 函数中止上一次未完成的请求，避免过期数据和资源浪费。
在 Vue 3 中，watchEffect 配合 AbortController 是处理异步请求竞态（race condition）最简洁有效的方式之一。核心思路是：每次副作用重新执行前，主动中止上一次未完成的请求。
为什么需要 AbortController？
当用户快速切换搜索关键词、分页或筛选条件时，多个请求可能并发发出，但只有最新一次的结果有意义。若不取消旧请求，不仅浪费资源，还可能导致界面显示“过期数据”。AbortController 提供标准的中止信号（AbortSignal），配合 fetch 或支持 signal 的请求库（如 Axios v1.2+）可原生中断请求。
watchEffect 自动清理上一次副作用
watchEffect 允许传入一个清理函数（cleanup function），它会在副作用**重新运行前**被调用——这正是触发 abort() 的理想时机：
- 每次响应式依赖变化 → 触发新副作用 → 先执行上一次的 cleanup → 再执行新逻辑
- 无需手动管理控制器生命周期，Vue 帮你自动调度
基础实现示例（fetch + watchEffect）
以下是一个搜索输入框的典型场景：
立即学习“前端免费学习笔记（深入）”；
import { ref, watchEffect } from 'vue'
const searchQuery = ref('')
const searchResults = ref([])
const isLoading = ref(false)
const error = ref(null)
watchEffect((onCleanup) => {
// 1. 每次执行前先创建新的 AbortController
const controller = new AbortController()
// 2. 清理函数：中止上一次请求（如果存在）
onCleanup(() => controller.abort())
// 3. 只有输入非空才发起请求
if (!searchQuery.value.trim()) {
searchResults.value = []
return
}
isLoading.value = true
error.value = null
fetch(`/api/search?q=${encodeURIComponent(searchQuery.value)}`, {
signal: controller.signal // 传入中止信号
})
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`)
return res.json()
})
.then(data => {
// ✅ 确保请求未被中止后再更新状态（可选防御）
if (controller.signal.aborted) return
searchResults.value = data
})
.catch(err => {
if (err.name === 'AbortError') return // 忽略中止错误
error.value = err.message
})
.finally(() => {
if (!controller.signal.aborted) {
isLoading.value = false
}
})
})
进阶建议与注意事项
-
避免重复 abort：调用
controller.abort()多次无害，但建议在 cleanup 中直接调用，无需判空 -
兼容 Axios：Axios 支持
signal（v1.2+），用法一致；旧版本可用cancelToken，但已废弃，推荐升级 -
防抖不是替代方案：防抖能减少请求数量，但无法解决“后发请求先返回”的竞态问题；
watchEffect + AbortController是更彻底的解法 -
组合式函数封装：可将该模式抽成
useFetch或useAsyncData，统一处理 loading/error/data 和中止逻辑
不需要额外的状态管理或副作用追踪，Vue 的响应式系统和 watchEffect 的清理机制天然契合 AbortController 的语义。只要记住一点：cleanup 是“上一次”的收尾，不是“当前”的清理。
