リクエストをキャンセルする新しい方法-AbortController

フロントエンドでは、主に2つの方法でリクエストを送信できます：XHR と Fetch です。XHR は、うーん、かなり昔から存在する API です。しかし、設定が面倒なため、しばしばより高レベルな API にラッピングされて使用されます。例えば、jQuery の getJSON、axios、RxJS の AjaxObservable などです。

最近では、Promise が徐々に普及してきたことで、Fetch API はこれらの問題を大幅に改善することができました。返り値が Promise で、操作が便利なだけでなく、API も非常にシンプルです。

とはいえ、依然として致命的な欠点があります。Fetch はリクエストをキャンセルできません。setTimeout を使って返り値を無視することはできますが、リクエストは依然として待機し続けます。XHR では XMLHttpRequest.abort を使ってキャンセルできますが、Fetch には同様の API がありません。

しかし、最近！ついに新たな救世主、AbortController が登場しました。

AbortController インターフェイスの abort() メソッドは、DOM リクエスト（例：Fetch リクエスト）が完了する前に中止します。これにより、fetch リクエストや、応答の Body の消費、ストリームを中止することができます。

使い方は非常に簡単です。

const abortController = new AbortController()
const signal = abortController.signal

そして、signal を fetch に渡すだけです。

fetch("/long-running", { signal: signal })

abortController.abort を呼び出すと、signal が fetch に送信されます。もし signal を受け取ったときにリクエストがまだ完了していなければ、そのリクエストはキャンセルされます。

fetch("/long-running", { signal: signal })
setTimeout(() => abortController.abort(), 5000)

5 秒以内にリクエストが完了しなければ、キャンセルされます。

RxJS でラッピングすれば、API がさらに便利に使えるかもしれません。しかし、現時点でのブラウザのサポート状況はあまり良くありません。