目次
AbortController の紹介
AbortController は、JavaScriptの組み込みAPIであり、一つまたは複数のWebリクエストをキャンセルする方法を提供します。これは、fetch APIを使用してネットワークリクエストを送信するなど、非同期タスクを管理するのに特に便利です。AbortController を使用することで、開発者は必要に応じてこれらのリクエストをキャンセルでき、アプリケーションのパフォーマンスとユーザー体験を向上させることができます。
AbortController の使用方法
AbortController を使用するプロセスは非常に直接的です。まず、AbortController のインスタンスを作成し、キャンセルしたいリクエストにその signal 属性を使用します。
const controller = new AbortController();
const signal = controller.signal;
fetch(url, { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch error:', err);
}
});
上記のコードでは、fetch 関数に signal を渡しています。これにより、リクエストをキャンセルする必要がある場合には、controller.abort() メソッドを呼び出すことができます。
controller.abort();
abort メソッドが呼び出されると、この controller の signal を使用するすべてのリクエストがキャンセルされ、関連するプロミスは AbortError で拒否されます。
使用シナリオ
AbortController の使用シナリオは非常に広範です。例えば、検索機能において、ユーザーが検索語を入力する際に、連続して複数のリクエストを素早く送信する可能性があります。AbortController を使用することで、新しいリクエストを送信する前に以前のリクエストをキャンセルし、不要なネットワークトラフィックを避け、応答速度を向上させることができます。
また、AbortController は、addEventListener 内のイベントリスナーを制御したり、他のAPI（例えば Stream API）と組み合わせて使用し、より複雑なキャンセルロジックを実現するためにも使用できます。
