AbortController APIについて

これは備忘録

こちらは私のアウトプット用の備忘録ですので、内容が正確なものである保証はできません！

AbortController APIとは

主にfetch処理を中断したりする際に使用するWebAPIのことらしいです。
例えば、ユーザーが検索条件を変更する度にデータを取得するfetchが実行されているというのは非効率なため、fetchが実行されて完了する前に次のfetchが飛んできた場合、前回のfetchを中断することができるらしい。

そもそもWebAPIってなんでしょうか

まずAPIとはApplication Programming Interfaceの頭文字をとったもの。APIとは、アプリケーションやプログラムなどをつなぐ接点（インターフェース）のことを指すらしい。
APIを活用することによって、外部からその機能やデータを利用できたりするのでより効率的に開発を進めることができたりするらしい。また、APIを提供する側にとっては、より広く自分たちの情報を提供や、多くのサービス利用につながるので有益らしいです。なるほど。

話を戻してAbortControllerはどうやって使うの？

詳しいことはMDN WEB DOCSを参照した方が良いかもしれません。
実装例です。途中まで自分で書いてみたのですが、合っているか確認したくなりChatGPTになげて確認しました。

javascript sample.js

let isFetching = false; // フラグ
let abortController;
const url = "https://jsonplaceholder.typicode.com/todos/";

const fetchData = async () => {
    // リクエスト中のフラグを立てる
    isFetching = true;

    // AbortControllerを新しく作成
    abortController = new AbortController();
    const signal = abortController.signal;

    try {
        const response = await fetch(url, { signal });
        if (!response.ok) return; // アーリーリターン
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    } finally {
        isFetching = false; // フラグを下げる
    }
}

document.getElementById("button").addEventListener("click", () => {
    if (isFetching) {
        abortController.abort(); // リクエストをキャンセル
    }
    fetchData(); // 新たにデータを取得
});

flagをたてることでfetchが完了している処理にまでabortを実行することになり、特に何も起きないようですが無駄な処理になってしまうのでflagで分岐している感じです。

ちなみに毎回abortControllerをインスタンス化しているのは、一度中断を実行してしまうと再利用が不可能なようなので新たにインスタンス化を行う必要があるようです。

signalの中身はboolean型になるみたいです。abortが実行されるとsignalで紐づけたfetchの処理のみが中断され、中断されると、try-catchのcatchにAbortErrorというものが吐き出されるようです。