JS의 AbortController 내장 API란?

좋은 질문이에요 👍
AbortController는 JavaScript에서 비동기 작업(특히 fetch 요청) 을 중간에 취소(abort) 하기 위해 만들어진 내장 API예요.

---

🧠 한 줄 요약

AbortController는 fetch, async 함수, EventListener 같은 비동기 동작을 중간에 멈추게 할 수 있는 도구다.

---

📘 기본 구조

const controller = new AbortController();   // 컨트롤러 생성
const signal = controller.signal;           // 시그널 객체 추출

fetch("https://example.com/data", { signal })  // 시그널 연결
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === "AbortError") {
      console.log("요청이 취소됨");
    } else {
      console.error(err);
    }
  });

// 일정 시간 뒤 요청 취소
setTimeout(() => {
  controller.abort();   // fetch 요청 중단
}, 2000);

실행 순서

1. AbortController를 생성하면, 내부적으로 signal 객체가 생김.
2. fetch에 { signal } 옵션을 주면 “이 요청은 이 시그널을 감시하겠다”는 뜻.
3. controller.abort()가 호출되면 시그널이 모든 리스너에게 “중단해!” 신호를 보냄.
4. fetch는 즉시 네트워크 요청을 멈추고, AbortError 예외를 던짐.

---

📦 여러 곳에서 활용 가능

AbortController는 fetch 외에도 다음과 같이 사용돼요:

상황 예시 코드

⏳ 타임아웃 처리	setTimeout(() => controller.abort(), 5000)
📡 여러 요청 중 하나만 유지	여러 요청에 같은 signal 전달 후, 필요 없는 요청만 abort
🧩 이벤트 리스너 해제	element.addEventListener("click", handler, { signal }) — abort 시 자동 해제

---

⚙️ 이벤트 리스너 예시

const controller = new AbortController();

document.addEventListener("click", () => {
  console.log("클릭됨");
}, { signal: controller.signal });

setTimeout(() => controller.abort(), 3000); // 3초 뒤 클릭리스너 제거

3초가 지나면 controller.abort()가 실행되고, 클릭 이벤트는 자동으로 제거됩니다.

---

🚨 주의할 점

• controller.abort()를 하면 해당 signal을 사용하는 모든 비동기 작업이 동시에 중단됩니다.
• 한 번 abort()한 컨트롤러는 다시 사용할 수 없습니다. (새 컨트롤러를 만들어야 함)

---

💡 요약

항목 설명

목적	비동기 작업 취소
핵심 객체	AbortController, AbortSignal
주요 메서드	controller.abort()
자주 쓰는 곳	fetch(), addEventListener()
특징	여러 작업을 한 번에 취소 가능

---