在 vue 3 中，watcheffect 的 oncleanup 可用于取消过期请求，需在同步阶段注册 abortcontroller 并传入 fetch signal，响应中检查 aborted 状态或 aborterror，确保仅处理最新请求。
在 Vue 3 中，用 watchEffect 的 onCleanup 取消过期请求，核心是每次发起新请求前，主动中止上一轮尚未完成的请求。这能避免响应乱序、状态覆盖和资源浪费。
必须同步注册 onCleanup
onCleanup 只能在 watchEffect 回调的同步执行阶段调用。一旦进入 await、setTimeout 或事件回调等异步上下文，Vue 就无法绑定清理逻辑，会报错 “no active effect found”。
- ✅ 正确：在
fetch调用前立刻注册onCleanup(() => controller.abort()) - ❌ 错误：先
await fetch(...)，再调用onCleanup—— 此时已脱离响应式追踪
用 AbortController 主动中断请求
现代浏览器原生支持 AbortController，它是取消 fetch 请求最标准、最可靠的方式。
- 每次
watchEffect执行都新建一个controller = new AbortController() - 把
controller.signal传入fetch选项 - 在
onCleanup中调用controller.abort() - 在
.then或.catch中检查err.name === 'AbortError'，跳过对已取消请求的处理
防抖搜索场景示例
比如用户输入关键词触发搜索，连续输入 “vue”、“vue3”、“vue3 watchEffect”，应只保留最后一次请求的结果：
const keyword = ref('')
const result = ref(null)
watchEffect((onCleanup) => {
const controller = new AbortController()
onCleanup(() => controller.abort())
fetch(`/api/search?q=${keyword.value}`, {
signal: controller.signal
})
.then(res => res.json())
.then(data => {
// 确保没被中止才更新
if (!controller.signal.aborted) {
result.value = data
}
})
.catch(err => {
if (err.name !== 'AbortError') {
console.error('请求失败:', err)
}
})
})
配合状态标记更稳妥
对于使用 axios 等不直接支持 AbortSignal 的库，可手动维护一个取消标记：
- 声明局部变量
let cancelled = false -
onCleanup中设cancelled = true - 在响应处理时判断
if (cancelled) return - 注意：该方式不如
AbortController严格，但兼容性更好
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
