[JavaScript] AbortController: 비동기 취소

AbortController, AbortSignal, abort controller, abort signal

정의

AbortController 는 비동기 작업 (fetch, event listener 등) 을 취소 하기 위한 표준 인터페이스.

기본 사용

const controller = new AbortController();

fetch('/api/slow', { signal: controller.signal })
    .then(r => r.json())
    .catch(err => {
        if (err.name === 'AbortError') console.log('cancelled');
        else throw err;
    });

// 5초 후 취소
setTimeout(() => controller.abort(), 5000);

이벤트 리스너 취소

같은 signal 을 재사용해 여러 리스너를 한 번에 정리:

const controller = new AbortController();
window.addEventListener('scroll', onScroll, { signal: controller.signal });
window.addEventListener('resize', onResize, { signal: controller.signal });

// 컴포넌트 언마운트 시
controller.abort();

AbortSignal.timeout

ES2022+:

fetch('/api', { signal: AbortSignal.timeout(5000) });
// 5초 후 자동 취소

AbortSignal.any (2024+)

여러 signal 중 하나라도 abort 되면 취소:

const signal = AbortSignal.any([userSignal, timeoutSignal]);

참고

• 관련 fetch
• 관련 async/await