Aborting Stale Asynchronous Fetch Requests Inside Vue Watchers

import { ref, watch } from 'vue';
 
export function useLiveSearch(queryRef: ReturnType<typeof ref<string>>) {
  const results = ref<string[]>([]);
  const isSearching = ref(false);
  const searchError = ref<Error | null>(null);
 
  watch(queryRef, async (query, _, onCleanup) => {
    if (!query.trim()) {
      results.value = [];
      return;
    }
    const controller = new AbortController();
    onCleanup(() => controller.abort());
 
    isSearching.value = true;
    searchError.value = null;
 
    try {
      const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
        signal: controller.signal
      });
      if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);
      results.value = await response.json();
    } catch (err: unknown) {
      if (err instanceof DOMException && err.name === 'AbortError') return;
      searchError.value = err instanceof Error ? err : new Error(String(err));
    } finally {
      if (!controller.signal.aborted) isSearching.value = false;
    }
  });
 
  return { results, isSearching, searchError };
}