Vue watch 搜索请求怎么防止旧响应覆盖新结果

搜索框里的 watch 不是“后输入的请求一定后返回”。用户连续输入 vue、vue 3、vue 3 watch 时，前一个慢请求可能最后才结束，直接把旧列表写回页面。可靠做法是两层保护：关键词变化时清理并取消旧请求；响应返回时再检查它是不是当前请求。

先确认问题是请求竞态而不是 watch 失效

watch(query, callback) 会在被观察的值变化后调用回调，但它不会替你排序网络响应。第一次输入创建请求 A，第二次输入又创建请求 B；如果 B 先返回，页面先显示新结果，随后 A 返回就可能把页面改回旧结果。这是异步请求竞态，增加 deep、flush 或重复读取 query.value 都不能解决。

因此示例把“发起请求”“取消上一轮”“允许谁写状态”放在同一个 watcher 内。空搜索词也应在入口处清空结果并返回，避免为没有意义的查询建立请求。

在 watch 回调中登记清理并取消旧请求

Vue 文档给出的核心机制是 watcher 失效、准备重新运行时调用清理函数。下面使用第三参数 onCleanup，它不受 Vue 版本 3.5 的同步限制，适合组件库或需要兼容旧版 Vue 3 的代码：

import { ref, watch } from 'vue'

const query = ref('')
const items = ref([])
const loading = ref(false)
const error = ref('')
let requestNo = 0

watch(query, async (value, _oldValue, onCleanup) => {
  const keyword = value.trim()
  if (!keyword) {
    items.value = []
    error.value = ''
    loading.value = false
    return
  }

  const currentNo = ++requestNo
  const controller = new AbortController()
  onCleanup(() => controller.abort())
  loading.value = true
  error.value = ''

  try {
    const response = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
      signal: controller.signal
    })
    if (!response.ok) throw new Error(`HTTP ${response.status}`)
    const data = await response.json()
    if (currentNo === requestNo) items.value = data.items
  } catch (err) {
    if (err.name !== 'AbortError' && currentNo === requestNo) {
      error.value = '搜索失败，请稍后重试'
    }
  } finally {
    if (currentNo === requestNo) loading.value = false
  }
})

关键点是 onCleanup 紧跟在 AbortController 创建之后。它发生在 await 前，所以下一次关键词变化时 Vue 可以调用 controller.abort()。取消请求通常会进入 catch，但这不是业务错误，不能把“用户继续输入”显示成失败提示。

给写回结果加请求身份保护

只调用 abort() 仍不够稳妥：请求可能已经完成、底层客户端可能不支持取消，或者响应进入 JavaScript 队列后才执行清理。因此示例用单调递增的 requestNo 标识每一轮请求。

注意身份检查必须覆盖所有异步状态：列表、错误和 loading 都要检查。否则旧请求虽然不能覆盖列表，却可能在新请求进行时把 loading 提前改成 false。

区分 Vue 版本并处理错误与边界状态

如果项目明确要求 Vue 3.5+，也可以改用 onWatcherCleanup：

import { onWatcherCleanup, watch } from 'vue'

watch(query, (value) => {
  const controller = new AbortController()
  onWatcherCleanup(() => controller.abort())
  // 在这里发起请求；不要把注册动作放到 await 之后
})

它的语义与回调参数里的 onCleanup 相同，但官方要求在 watcher 回调的同步执行阶段调用，不能写成“先 await，再注册清理”。若需要兼容 Vue 3.4 或更早版本，保留第三参数写法即可。

最后再补三项边界：搜索输入通常还应配合防抖，减少请求数量，但防抖不能代替取消和身份检查；组件卸载时，同步创建的 watcher 会由 Vue 停止，异步创建的 watcher 则需要自己保存并调用停止句柄；接口返回结构也要先确认，不能因为响应顺序正确就跳过 response.ok 和 JSON 错误处理。

常见问题

用了 AbortController，为什么旧结果仍然偶尔出现？

取消是尽力而为，不是响应顺序锁。请求已经完成或客户端没有真正中断时，旧回调仍可能运行，所以还要保留请求序号检查。

onWatcherCleanup 和 onCleanup 应该选哪个？

新项目且最低版本为 Vue 3.5+ 时可选 onWatcherCleanup；需要兼容更早 Vue 3 或希望清理逻辑跟随回调参数时，使用第三参数 onCleanup。

防抖能不能彻底解决搜索竞态？

不能。防抖只减少发起次数，无法保证已发出的请求按输入顺序返回。取消旧请求并验证当前请求身份仍然必要。

把取消和写回判定放在同一条边界上

Vue watch 负责发现搜索词变化，清理函数负责结束上一轮副作用，请求序号负责守住状态写回边界。把三者组合起来，再把取消错误与真实接口错误分开，快速输入时页面就能始终对应当前关键词，而不是碰运气等待网络返回顺序。

资料：Vue Watchers 官方文档、Vue Reactivity API Core 官方文档。