目次
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
)と組み合わせて使用し、より複雑なキャンセルロジックを実現するためにも使用できます。