Vue 3 中输入框防抖与请求取消需协同：防抖控制请求时机，AbortController或stale标记确保旧请求不干扰新结果；推荐封装useDebouncedFetch组合式函数。
在 Vue 3 中，输入框防抖 + 请求取消，本质是两件事协同：一是控制请求发起时机（防抖），二是确保旧请求不干扰新结果（取消或忽略）。防抖本身不负责取消请求，它只延迟执行；真正要“取消未完成校验”，得靠 AbortController 或 手动标记+条件过滤。下面分场景讲清楚怎么做。
用 AbortController 主动中断上一个 fetch 请求
这是最干净、资源最省的方式，尤其适合原生 fetch。核心是在每次新请求前 abort 上一个 controller：
- 声明一个响应式 ref 存 controller 实例：
const controller = ref(null) - 每次触发防抖回调时，先调
controller.value?.abort()，再新建 controller 并传给 fetch 的signal - 注意捕获
AbortError，避免报错中断流程
示例代码：
<script setup>import { ref, watch } from 'vue'
const keyword = ref('')
const list = ref([])
const controller = ref(null)
// 防抖逻辑（手动实现）
let timeout = null
watch(keyword, (val) => {
clearTimeout(timeout)
if (!val.trim()) return
timeout = setTimeout(async () => {
// 取消上一次请求
controller.value?.abort()
controller.value = new AbortController()
try {
const res = await fetch(`/api/search?q=${encodeURIComponent(val)}`, {
signal: controller.value.signal
})
const data = await res.json()
list.value = data.items
} catch (err) {
if (err.name !== 'AbortError') {
console.error('请求失败:', err)
}
// 忽略被中止的错误
}
}, 300)
})
</script>
用 onCleanup + stale 标记忽略过期响应
适用于无法使用 AbortController 的场景（比如某些封装的请求库不支持 signal），或者你用的是 watchEffect。原理是：每次 watch 触发时注册清理函数，把当前请求标记为“已过期”，等响应回来时判断是否 still valid：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在 watch 回调里定义
let stale = false - 用
onCleanup(() => { stale = true })确保上一次请求被标记 - 响应返回后只更新
if (!stale)的那次
这种方式不真正中断网络请求，但能保证 UI 不被错乱数据覆盖。
封装成可复用的组合式函数（推荐）
把防抖 + AbortController 封装成 useDebouncedFetch，以后直接调用，避免重复写逻辑：
- 接收搜索关键词 ref、请求 URL 模板、延迟毫秒数
- 内部管理 controller、timeout、loading、data、error 等状态
- 暴露
execute方法，也可支持手动取消（cancel()）
这样在组件里就只需：
const { data, loading, execute } = useDebouncedFetch(keyword,
(q) => `/api/search?q=${encodeURIComponent(q)}`,
300
)
watch(keyword, () => execute())
不建议混用 lodash.debounce + 手动 cancel 的原因
虽然 lodash.debounce 提供 .cancel() 方法，但它只能取消“还没执行的定时器”，对已经发出的请求完全无感。也就是说：
- 用户输 “vue” → debounce 定时器设为 300ms 后发请求
- 又快速输 “vue3” → 前一个定时器被 cancel，但“vue”的请求如果已发出，仍会回来并可能覆盖结果
所以仅靠 debounce 不能解决竞态问题，必须配合请求层的取消机制（AbortController）或响应层的 stale 判断。
