JavaScript

AbortController とは

AbortController は、「途中でやめたい処理を止めるためのスイッチ」のような仕組みです。

たとえば fetch() でデータを読み込んでいる最中に、ユーザーが「キャンセル」したいときなどに使えます。

普通の fetch() は、一度始めたら終わるまで待つしかありません。

でも AbortController を使うと、自分で「もういらない！」と止めることができます。

基本の使い方

使う流れは３ステップです。

1. コントローラを作る
   

   JavaScript

   const controller = new AbortController();

2. そのコントローラの signal を使って処理を始める
   

   JavaScript

   fetch('https://example.com/data', { signal: controller.signal })
       .then(response => response.json())
       .then(data => console.log(data))
       .catch(error => {
           if (error.name === 'AbortError') {
               console.log('リクエストが中断されました');
           } else {
               console.error('その他のエラー:', error);
           }
       });

3. 必要になったら中断する
   

   JavaScript

   controller.abort();

ポイント

• controller.abort() を呼ぶと、fetch() は「AbortError」という特別なエラーを出して止まります。
• 長い時間がかかる通信や、ページ遷移時に不要になったリクエストを止めるのに便利です。
• タイマーや複数のリクエストにも応用できます。

たとえばこんな使い方

const controller = new AbortController();

setTimeout(() => {
    controller.abort();
}, 3000); // 3秒後に強制中断

fetch('https://api.example.com/slow', { signal: controller.signal })
    .then(response => response.text())
    .then(console.log)
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('3秒経ったので中断しました');
        }
    });

→ 「一定時間たったら自動で中止する」といった処理も簡単にできます。

補足メモ

• 一度中止したコントローラは再利用できません（新しく作り直す必要があります）。
• 最近では AbortController は fetch だけでなく、addEventListener() など一部のAPIでも対応しています。