자바스크립트 AbortController로 비동기 작업 깔끔하게 취소하세요!

AbortController를 사용하면 비동기 작업 중 불필요한 작업을 깔끔하게 취소할 수 있음

controller.abort() 호출 시 signal의 aborted 속성이 true로 변경되어 연결된 작업 중단

fetch 요청 취소, 이벤트 리스너 관리, 여러 비동기 작업 동시 취소 패턴에 활용 가능

AbortSignal.timeout()을 사용해 타임아웃 기반 취소 구현 가능

AbortController의 기본 구조

AbortController는 비동기 작업 취소를 위한 자바스크립트(JavaScript) API로, AbortSignal 객체를 함께 제공한다. AbortController는 취소 명령을 내리는 주체이며, AbortSignal은 취소 신호를 전달받는 객체이다.

controller.abort(): signal의 aborted 속성을 true로 변경하여 연결된 비동기 작업 중단

signal.reason: abort() 호출 시 취소 사유(reason)를 전달하여 에러 처리

AbortError: fetch 요청 취소 시 발생하는 특정 에러(Error)로, 네트워크 오류와 구분

fetch 요청 취소 방법

AbortController는 fetch 요청 취소에 가장 많이 활용되며, fetch의 두 번째 인자로 signal을 전달한다. abort()가 호출되면 fetch는 AbortError를 발생시키며, catch 블록에서 에러 종류를 확인하여 의도적인 취소 여부(Intentional Cancellation)를 판단할 수 있다.

AbortController 재사용 불가: 한 번 abort된 signal은 재사용 불가

마지막 요청 반영: 자동 완성 기능과 같이 연속된 요청에서는 마지막 요청만 반영하는 로직 필요

UI 업데이트 방지: abort는 fetch 요청만 중단시키므로, UI 업데이트 로직은 별도로 처리

이벤트 리스너 관리 및 여러 작업 동시 취소

AbortController는 fetch 외에도 addEventListener의 세 번째 인자로 signal을 전달하여 이벤트 리스너를 관리할 수 있다. controller.abort() 호출 시 이벤트 리스너가 자동으로 해제되어 메모리 누수(Memory Leak) 방지에 기여한다.

여러 리스너 동시 해제: 하나의 controller로 여러 이벤트 리스너를 한 번에 해제 가능

여러 요청 동시 취소: 하나의 signal을 여러 fetch 요청에 전달하여 동시 취소(Concurrent Cancellation) 구현

AbortSignal.any(): 여러 signal 중 하나라도 abort되면 취소 신호를 보내는 결합(Combination) 기능 제공

AbortSignal.timeout() 활용

AbortSignal.timeout()을 사용하면 지정된 시간(Time) 후에 자동으로 취소 신호를 보낼 수 있다. 기존에는 setTimeout과 abort()를 조합해야 했지만, 이 정적 메서드를 사용하면 코드 간결성(Code Conciseness)을 높일 수 있다.

TimeoutError: 스펙상 timeout으로 인한 취소는 TimeoutError로 구분

signal.reason 확인: 에러를 더 정확히 구분하기 위해 err.name과 함께 signal.reason 확인 권장

구형 환경 호환성: AbortSignal.any()와 같은 최신 API는 구형 환경(Legacy Environment) 호환성 확인 필요