AbortController와 타임아웃

기본 패턴

const controller = new AbortController();

setTimeout(() => controller.abort(), 3000);

const response = await fetch("https://api.example.com/data", {
  signal: controller.signal,
});

설명

• AbortController는 오래 걸리는 비동기 작업을 바깥에서 취소할 수 있게 만드는 표준 도구입니다.
• fetch()처럼 signal을 받는 API에 연결하면, 일정 시간이 지나거나 사용자가 취소할 때 같은 방식으로 작업을 멈출 수 있습니다.
• 이 패턴은 네트워크 요청뿐 아니라 스트림, 타이머, 직접 만든 비동기 함수에서도 점점 더 자주 보입니다.
• 중요한 점은 "취소할 수 있다"와 "자동으로 정리된다"가 같지 않다는 것입니다. 취소 후 정리 로직도 함께 생각해야 합니다.
• 즉 AbortController는 타임아웃 구현 도구이기도 하지만, 더 넓게 보면 비동기 작업의 생명주기를 제어하는 인터페이스입니다.

짧은 예제

const signal = AbortSignal.timeout(2000);

await fetch("https://api.example.com/users", { signal });

빠른 정리

주의할 점