Как защитить Vue watch от устаревшего ответа поиска?

Условие

Во Vue 3 watch(query, async q => { results.value = await search(q); }) запускает запрос при изменении строки. Ответ на старое q может прийти позже нового. Требуется показывать только результат последнего запроса, в том числе после очистки поля. Как исправить?

Ответ

Используйте cleanup watcher и флаг отменённого запуска либо идентификатор версии. Перед изменением results проверяйте, что ответ относится к актуальному значению query.

watch(query, async (q, _, onCleanup) => {
  let stale = false;
  onCleanup(() => { stale = true; });
  results.value = [];
  if (!q.trim()) return;
  try {
    const data = await search(q);
    if (!stale) results.value = data;
  } catch (error) {
    if (!stale) searchError.value = 'Поиск не выполнен';
  }
});

Регистрация cleanup до await закрывает гонку. При поддержке search добавляют AbortController для экономии ресурсов; debounce уменьшает число запросов, но сам по себе не защищает от обратного порядка ответов.

Источник: vuejs.org.