Fetch: Abort

fetch を中止するのは少し面倒です。思い出してください、fetch は promise を返します。そして、JavaScript には一般的に promise を “中止する” という概念はありません。では、どうやって fetch をキャンセルしましょう？

このような目的のための、特別な組み込みのオブジェクトがあります。: AbortController.

使い方はとても簡単です:

• Step 1: コントローラを作成します:

  let controller = new AbortController();

  コントローラは非常にシンプルなオブジェクトです。単一のメソッド abort() と、単一のプロパティ signal を持っています。abort() が呼ばれると、abort イベントが controller.signal で発生します。:

  このようになります:

  let controller = new AbortController(); let signal = controller.signal; // controller.abort() が呼ばれるとトリガーします signal.addEventListener('abort', () => alert("abort!")); controller.abort(); // abort! alert(signal.aborted); // true (abort 後)

• Step 2: signal プロパティを fetch オプションに渡します:

  let controller = new AbortController(); fetch(url, { signal: controller.signal });

  これで fetch は signal をリッスンします。

• Step 3: 中止するために controller.abort() を呼びます:

  controller.abort();

  これで終わりです: fetch は signal からのイベントを得て、リクエストを中止します。

fetch が中止されたとき、その promise は AbortError という名前のエラーで reject されます。なので、次のように処理できます:

// 1秒で中止 let controller = new AbortController(); setTimeout(() => controller.abort(), 1000); try { let response = await fetch('/article/fetch-abort/demo/hang', { signal: controller.signal }); } catch(err) { if (err.name == 'AbortError') { // abort() を処理 alert("Aborted!"); } else { throw err; } }

AbortController はスケーラブルで, 複数の fetch を一度にキャンセルすることができます。

例えばここでは、平行して複数の urls を fetch し、コントローラはそれらすべてを中止します。:

let urls = [...]; // 平行して fetch する url のリスト let controller = new AbortController(); let fetchJobs = urls.map(url => fetch(url, { signal: controller.signal })); let results = await Promise.all(fetchJobs); // 他の場所から: // controller.abort() ですべての fetch を停止します

もし fetch とは別の独自のジョブがある場合も、一つの AbortController を使用して fetch と一緒にそれらを停止することができます。

let urls = [...]; let controller = new AbortController(); let ourJob = new Promise((resolve, reject) => { ... controller.signal.addEventListener('abort', reject); }); let fetchJobs = urls.map(url => fetch(url, { signal: controller.signal })); let results = await Promise.all([...fetchJobs, ourJob]); // 他の場所から: // controller.abort() ですべての fetch と独自のジョブを停止します