Async Task Cancellation via Custom Vue Effect Scope Disposables

import { ref, effectScope, onScopeDispose } from 'vue';
 
export function useCancellableFetch(urlProvider) {
  const data = ref(null);
  const error = ref(null);
  const scope = effectScope();
 
  scope.run(() => {
    const controller = new AbortController();
    
    onScopeDispose(() => {
      controller.abort('Scope disposed');
    });
 
    const execute = async () => {
      try {
        const response = await fetch(urlProvider(), { signal: controller.signal });
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        data.value = await response.json();
      } catch (err) {
        if (err.name !== 'AbortError') error.value = err;
      }
    };
    execute();
  });
 
  return { data, error, stop: () => scope.stop() };
}