Cancelling Stale Asynchronous Requests with AbortController in Vue Watchers

import { ref, watch } from 'vue';
 
export function useUserSearch(queryRef) {
  const results = ref([]);
  const isLoading = ref(false);
  const error = ref(null);
  let abortController = null;
 
  watch(queryRef, async (newQuery) => {
    if (abortController) {
      abortController.abort();
    }
    if (!newQuery.trim()) {
      results.value = [];
      return;
    }
 
    abortController = new AbortController();
    isLoading.value = true;
    error.value = null;
 
    try {
      const res = await fetch(`/api/search?q=${encodeURIComponent(newQuery)}`, {
        signal: abortController.signal
      });
      if (!res.ok) throw new Error(`HTTP status: ${res.status}`);
      results.value = await res.json();
    } catch (err) {
      if (err.name !== 'AbortError') {
        error.value = err.message;
      }
    } finally {
      if (!abortController.signal.aborted) {
        isLoading.value = false;
      }
    }
  }, { immediate: true });
 
  return { results, isLoading, error };
}