azukiazusa

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

2024.02.29

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

azukiazusa

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

azukiazusa

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;
});