Fetch APIでリクエストを途中で中断（Abort）する方法

はじめに

Fetch APIで送信したリクエストを、途中で中断させる方法を紹介します。

時間がかかる非同期（AJAX）処理があり、レスポンスが返ってくるのが待っていられなくて途中で止める必要がある場合に使える方法です。

今回、リクエスト中断の為に使用するAbortSignal インターフェイスは、まだ実験段階のAPIで、将来的に変更になる可能性があるため、そのつもりで。

Fetch APIの基本的な使い方は、こちらをご覧ください。
【関連記事】
▶Fetch APIの使い方まとめ！JavaScirptでGET/POSTを非同期で送信

AbortSignal インタフェースで処理を中断

AbortSignal インタフェースは、その名の通り処理を中断させるためのAPIです。

AbortControllerオブジェクトを通じて、FetchなどのAPIと通信し、任意のタイミングで処理を中断させることを可能にします。

スポンサーリンク

Fetch APIのリクエストを中断するサンプル

では、AbortSignal インタフェース使って、Fetch APIのリクエストを中断させるコードを作成していましょう。

まず、上のイメージのようにHTMLにボタンを２つ配置します。

<button id="btn">開始</button>
<button id="abort">中断</button>

次に、JavaScirptで開始ボタンクリック時に非同期リクエストを送信し、中断ボタンのクリックで、リクエストを中断する処理を書いていきます。

var start = document.getElementById("start");    // 開始ボタン
var abort = document.getElementById("abort");  // 中断ボタン

var controller = null;
var signal = null;

// 開始ボタンクリック時
start.addEventListener("click", () => {
  controller = new AbortController();  // リクエスト中断用のAbortController
  signal = controller.signal;          // AbortSignalオブジェクト

  // リクエストを送信
  console.log("Start Reqest!");
  const url = "/api/get.php"
  const response = fetch(url, 
    {
      signal: signal   // AbortSignalオブジェクトを、fetchのオプションに渡す
    })
    .then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.log(err) /* 中断するとエラーが発生する */);
});

// 中断ボタンクリック時
abort.addEventListener("click", async () => {
  // abort関数でシグナルオブジェクトに中断を送信
  controller.abort();
  console.log('Request aborted!');
});

さいごに

AbortSignal インタフェースで、Fetch APIで送信したリクエストを中断させる方法を紹介しました。

冒頭でも述べましたが、AbortSignal インターフェイスは、まだ実験段階のAPIで、将来的に変更になる可能性がありますが、かなりスマートに中断処理が書けて気持ちがいいです。

ちなみに、2020年10月時点で、AbortSignal インタフェースのブラウザ対応状況は、次の通りとなっています。