JavaScript AbortController 사용법 정리

웹 애플리케이션 개발에서 비동기 요청을 중간에 취소해야 하는 상황은 종종 발생한다.
예를 들어, 검색창에 입력할 때마다 API 요청을 보내는데 사용자가 입력을 빠르게 바꾼다면, 이전 요청은 불필요하게 서버 리소스를 차지하게 된다.
이런 경우 AbortController를 사용하면 깔끔하게 해결할 수 있다.
 

AbortController란?

AbortController는 브라우저에서 제공하는 Web API 중 하나로, fetch와 같은 비동기 작업을 명시적으로 취소할 수 있도록 지원한다.
AbortController 객체는 signal 속성을 가지고 있으며, 이 signal을 비동기 요청에 전달하면, 컨트롤러에서 취소 명령(abort())을 내릴 수 있다.

 

기본 사용 예시

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('요청이 취소되었습니다.');
    } else {
      console.error('기타 에러:', err);
    }
  });

// 2초 후 요청 취소
setTimeout(() => {
  controller.abort();
}, 2000);

위 예제에서는 fetch 요청을 보낸 후 2초 뒤에 controller.abort()를 호출하여 요청을 취소한다.
취소된 요청은 AbortError 예외를 발생시키므로, 에러 처리 시 구분해야 한다.
 

실전 활용 예시 – 검색 자동완성

let controller;

async function search(query) {
  if (controller) {
    controller.abort(); // 이전 요청 취소
  }
  controller = new AbortController();

  try {
    const response = await fetch(`/search?q=${query}`, {
      signal: controller.signal
    });
    const results = await response.json();
    console.log('검색 결과:', results);
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('이전 요청이 취소되었습니다.');
    } else {
      console.error(err);
    }
  }
}

이 패턴은 빠르게 변하는 입력 값에 대해 불필요한 요청을 취소할 수 있다.
이를 통해서 서버 부하를 줄이고 UX를 개선할 수 있다.
 

주의사항

• AbortController는 한 번만 abort() 호출이 가능합니다. 새로운 요청에는 새 컨트롤러를 만들어야 한다.
• 모든 브라우저에서 지원하지 않을 수 있으므로 MDN 호환성 표를 확인하는 것이 좋다.
• axios와 같이 fetch를 직접 사용하지 않는 라이브러리에서는 자체 취소 토큰(CancelToken)이나 AbortController 지원 여부를 확인해야 한다.

 

정리

AbortController는 네트워크 요청과 같은 비동기 작업을 취소할 수 있는 간단하면서도 강력한 API이다.
적절히 활용하면 불필요한 요청을 줄이고, 자원 낭비를 방지하며, 사용자 경험을 개선할 수 있다.

 

참고자료

• MDN Web Docs – AbortController
• WHATWG Fetch 표준