작성완료

Abort Controller 비동기 요청 취소

AbortController는 비동기 요청을 취소할 수 있는 API로, 불필요한 네트워크 요청을 줄이고 UI 응답성을 높이는 데 유용하다. 기본 사용법, 검색 입력에서의 활용, 타임아웃 구현 방법을 설명하며, 자동완성, 검색, 무한스크롤과 같은 요청이 자주 갱신되는 패턴에서 효과적이다.

JavaScriptWeb Front Developer

AbortController란?

브라우저에서 제공하는 AbortController는 fetch 같은 비동기 작업을 중단할 수 있게 해주는 API로, 불필요한 네트워크 요청을 줄이고 UI 응답성을 높이는 데 유용합니다.

기본 사용법

javascript
const controller = new AbortController();
const { signal } = controller;

fetch('/api/data', { signal })
  .then(res => res.json())
  .then(console.log)
  .catch(err => {
    if (err.name === 'AbortError') console.log('요청 취소됨');
  });

controller.abort();

검색 입력에서의 활용

잔여 요청을 모두 취소하여 최신 요청만 처리하도록 만들 수 있습니다.

javascript
let controller;

async function search(keyword) {
  if (controller) controller.abort();
  controller = new AbortController();

  try {
    const res = await fetch(`/search?q=${keyword}`, { signal: controller.signal });
    return await res.json();
  } catch (e) {
    if (e.name !== 'AbortError') throw e;
  }
}

타임아웃 구현에도 활용 가능

javascript
function fetchWithTimeout(url, ms) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), ms);

  return fetch(url, { signal: controller.signal })
    .finally(() => clearTimeout(timer));
}

정리

AbortController는 네트워크 낭비를 줄이고 UI 반응성을 높이는 데 꼭 필요한 현대적 웹 API입니다. 특히 자동완성, 검색, 무한스크롤처럼 요청이 자주 갱신되는 패턴에서 효과가 큽니다.