クリーンアップのための AbortController

fetch リクエストをキャンセルする理由

AbortController の基本

const controller = new AbortController();

try {
  const res = await fetch('/api/data', { signal: controller.signal });
  const data = await res.json();
  setData(data);
} catch (err) {
  if (err instanceof DOMException && err.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    setError((err as Error).message);
  }
}

// To cancel:
controller.abort();

useEffect のクリーンアップでの使用

useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
      if (!res.ok) throw new Error(`${res.status}`);
      setUser(await res.json());
    } catch (err) {
      if ((err as DOMException).name !== 'AbortError') {
        setError((err as Error).message);
      }
    }
  }

  load();
  return () => controller.abort();
}, [userId]);

AbortError とネットワークエラーの比較

signal.aborted プロパティ

const data = await fetchData();
if (!controller.signal.aborted) {
  setData(data); // safe to update state
}

複数のリクエストのキャンセル

const controller = new AbortController();
const { signal } = controller;

await Promise.all([
  fetch('/api/users',    { signal }),
  fetch('/api/products', { signal }),
  fetch('/api/settings', { signal }),
]);

controller.abort(); // cancels all three

Axios と AbortController

const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });

// In cleanup:
return () => controller.abort();

React Query による自動処理

AbortController によるタイムアウト

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

try {
  const data = await fetch(url, { signal: controller.signal });
  // ...
} finally {
  clearTimeout(timeoutId);
}

AbortSignal.timeout() — 最新の簡易方法

const res = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000) // 5 second timeout
});

React 18 Strict Mode ではクリーンアップが重要

確認問題

まとめ：AbortController