0Pricing
JavaScript Academy · レッスン

AbortController でリクエストを中止する

実行中のリクエストを適切にキャンセルします。

「AbortController でリクエストを中止する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

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

開始したリクエストが不要になることがあります。たとえば、ユーザーが別の画面へ移動した、検索語を入力し直した、またはタイムアウトになった場合です。AbortController を使うと、実行中の fetch をキャンセルできます。

コントローラーの作成

AbortController を作成します。fetch に渡す signal と、キャンセルに使用する abort() メソッドが提供されます。

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

signal の渡し方

オプションオブジェクトを使って、コントローラーの signal を fetch に渡します。これでリクエストをキャンセルできるようになります。

fetch(url, { signal: controller.signal });

abort の呼び出し

controller.abort() を呼び出してキャンセルします。保留中の fetch の Promise は AbortError で reject されます。

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

AbortError の捕捉

catch の中で err.name === "AbortError" を確認し、意図的なキャンセルと実際の障害を区別します。

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

タイムアウトのパターン

setTimeout と組み合わせると、遅いリクエストを自動的に abort できます。リクエストが先に完了した場合はタイマーを解除します。

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

組み込みのタイムアウトヘルパー

最近の環境には AbortSignal.timeout(ms) が用意されています。これは自動的に abort する signal を返します。自分で setTimeout を組み立てるよりもすっきり記述できます。

fetch(url, { signal: AbortSignal.timeout(5000) });

前の検索をキャンセルする

入力中の検索では、新しいリクエストを開始する前に前のリクエストを abort します。これにより、古いレスポンスが新しい検索結果を上書きするのを防げます。

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

1 つの signal で複数の fetch を制御する

1 つの signal で複数のリクエストを同時に abort できます。同じ signal を複数の fetch に渡すと、1 回の abort() ですべてをキャンセルできます。

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

すでに abort された signal

fetch に渡した時点ですでに signal が abort されている場合、リクエストはすぐに reject されます。状態を確認する必要がある場合は、signal.aborted を確認します。

if (controller.signal.aborted) console.log("already cancelled");

アンマウント時のクリーンアップ

コンポーネントベースの UI では、コンポーネントが破棄されたときに未完了のリクエストを abort します。これにより、もう存在しないものの状態を設定するのを防げます。

const controller = new AbortController();
// on teardown:
controller.abort();

クイックチェック

Fetch リクエストの abort です。

まとめ

AbortController を作成し、その signal を fetch に渡して、abort() を呼び出してキャンセルします。Promise は AbortError で reject されるため、名前で検出できます。タイムアウト（AbortSignal.timeout）、前の検索のキャンセル、複数リクエストのキャンセル、破棄時のクリーンアップに利用できます。

よくある質問

「AbortController でリクエストを中止する」レッスンは無料ですか？

はい。「AbortController でリクエストを中止する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「AbortController でリクエストを中止する」で何を学びますか？

実行中のリクエストを適切にキャンセルします。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「AbortController でリクエストを中止する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. GET リクエストを送信する
  2. POST とデータの送信
  3. エラーとステータスコードを処理する
  4. AbortController でリクエストを中止する
← JavaScript Academyに戻る