AbortController로 불필요한 요청 취소하기

검색이나 위젯 렌더링처럼 사용자 입력이나 화면 전환이 잦은 화면에서는
짧은 시간 안에 여러 API 요청이 발생하는 경우가 많다.
하지만 실제로 화면에 필요한 응답은 가장 마지막 요청의 결과인 경우가 대부분이다.

이런 상황에서 이전 요청까지 끝까지 처리하게 되면
불필요한 네트워크 사용과 렌더링, 상태 업데이트로 이어질 수 있다.
이 문제를 해결하기 위해 AbortController를 살펴보게 되었다.

---

AbortController - Web API | MDN

AbortController란?

AbortController는 실행 중인 비동기 작업(fetch 요청 등)을
중간에 취소할 수 있도록 해주는 Web API다.

• AbortController : 취소 신호를 관리하는 객체
• signal : fetch에 전달되는 취소 신호
• abort() : 요청을 취소하는 메서드

즉, 더 이상 필요 없는 요청을 끝까지 실행하지 않도록 막을 수 있다.

---

let controller;

const fetchData = async (query) => {
  // 이전 요청이 있다면 취소
  if (controller) {
    controller.abort();
  }

  controller = new AbortController();

  try {
    const response = await fetch(`/api/search?q=${query}`, {
      signal: controller.signal,
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error.name === 'AbortError') {
      // 의도적으로 취소된 요청
      return;
    }
    throw error;
  }
};

이 구조에서는
새로운 요청이 시작될 때 이전 요청은 즉시 취소되고
가장 마지막 요청만 의미 있는 결과로 남게 된다.

---

주의할 점

AbortController로 요청을 취소하더라도
서버에서 이미 시작된 작업이 자동으로 중단되지는 않는다
따라서 서버 측에서도

• 세션 락 해제
• 요청 취소 신호를 감지하는 구조

등이 함께 고려되어야 실제 성능 개선으로 이어질 수 있다.