Handling Request Cancellation in Asynchronous Composables Using AbortController

import { ref, watchEffect, onUnmounted } from 'vue';
 
export function useFetchUser(userIdRef) {
  const userData = ref(null);
  let controller = null;
 
  watchEffect(async () => {
    if (controller) controller.abort();
    controller = new AbortController();
 
    try {
      const response = await fetch(`/api/users/${userIdRef.value}`, {
        signal: controller.signal
      });
      userData.value = await response.json();
    } catch (err) {
      if (err.name !== 'AbortError') throw err;
    }
  });
 
  onUnmounted(() => controller?.abort());
  return { userData };
}