AbortController로 요청 중단하기

요청을 취소하는 이유

컨트롤러 만들기

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

신호 전달하기

fetch(url, { signal: controller.signal });

abort 호출하기

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

AbortError 처리하기

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

제한 시간 패턴

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

내장 제한 시간 도우미

fetch(url, { signal: AbortSignal.timeout(5000) });

이전 검색 취소하기

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

하나의 신호로 여러 가져오기 요청 취소하기

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

이미 취소된 신호

if (controller.signal.aborted) console.log("already cancelled");

마운트 해제 시 정리

const controller = new AbortController();
// on teardown:
controller.abort();

빠른 확인

정리