Handling Fetch Cancellation with AbortController in Vue Composables

import { ref, onScopeDispose } from 'vue';
 
export function useFetchWithAbort(url) {
  const data = ref(null);
  const loading = ref(false);
  let controller = null;
 
  async function execute() {
    if (controller) controller.abort();
    controller = new AbortController();
    loading.value = true;
 
    try {
      const response = await fetch(url, { signal: controller.signal });
      data.value = await response.json();
    } catch (err) {
      if (err.name !== 'AbortError') throw err;
    } finally {
      loading.value = false;
    }
  }
 
  onScopeDispose(() => {
    if (controller) controller.abort();
  });
 
  return { data, loading, execute };
}