Abortable `fetch`

abortable-fetch.ts

export const isAbortError = (err: unknown): err is Error =>
  (err as Error)?.name == 'AbortError'

export const abortableFetch = (
  url: RequestInfo | URL,
  options?: RequestInit | undefined,
  fetchImpl?: typeof fetch
): [promise: Promise<Response>, abort: (reason?: any) => void] => {
  const controller = new AbortController()
  options = { ...options, signal: controller.signal }
  return [(fetchImpl ?? fetch)(url, options), controller.abort]
}

export const timeoutFetch = (
  timeout: number,
  url: RequestInfo | URL,
  options?: RequestInit | undefined,
  fetchImpl?: typeof fetch
) =>
  (fetchImpl ?? fetch)(url, {
    ...options,
    signal: AbortSignal.timeout(timeout),
  })

example.tsx

import { abortableFetch, isAbortError } from './abortable-fetch.ts';

function MyComponent() {
  const [data, setData] = useState();

  useEffect(
    () => {
      const [promise, abort] = abortableFetch('https://example.com');
      promise.then(response => response.json()).then(received => setData(received));
      return () => abort();
    },
    []
  );

  return <>...</>
}