1 つの AbortController で複数の fetch をキャンセルできる

AbortController は、fetch API でリクエストをキャンセルするためのオブジェクトです。AbortController は複数のリクエストを 1 度にキャンセルできます。

例えば、並行して複数のリクエストを行い、そのうちの 1 つのリクエストが完了したら残りのリクエストをキャンセルしたい場合には、Promise.race() と AbortController を使用することで実現できます。

const urls = [...];
const controller = new AbortController();
 
const requests = urls.map((url) => {
  return fetch(url, { signal: controller.signal });
});
 
const result = Promise.race(requests).then((response) => {
  controller.abort();
  return response;
});