AbortController, fetch 취소부터 React cleanup까지

const controller = new AbortController();
const signal = controller.signal;
 
// controller: 취소를 "트리거"하는 쪽
controller.abort();
 
// signal: 취소를 "감지"하는 쪽
signal.aborted; // true
signal.addEventListener('abort', () => { /* 정리 로직 */ });

const controller = new AbortController();
 
fetch('/api/search?q=react', { signal: controller.signal })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('요청이 취소되었습니다.');
    }
  });
 
// 나중에 취소
controller.abort();

// ❌ race condition 발생
async function loadPage(pageId: string) {
  const res = await fetch(`/api/pages/${pageId}`);
  const data = await res.json();
  setPageData(data); // 어떤 요청의 응답이 마지막에 올지 모름
}
 
// 사용자가 탭을 빠르게 전환: A → B → C
loadPage('A');
loadPage('B');
loadPage('C');

// ✅ race condition 방지
let controller: AbortController | null = null;
 
async function loadPage(pageId: string) {
  // 이전 요청 취소
  controller?.abort();
  controller = new AbortController();
 
  try {
    const res = await fetch(`/api/pages/${pageId}`, {
      signal: controller.signal,
    });
    const data = await res.json();
    setPageData(data); // 항상 최신 요청의 결과만 적용
  } catch (err) {
    if (err.name !== 'AbortError') throw err;
  }
}

const { data } = useQuery({
  queryKey: ['page', pageId],
  queryFn: ({ signal }) =>
    fetch(`/api/pages/${pageId}`, { signal }).then(res => res.json()),
});

// 직접 구현
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
try {
  const res = await fetch(url, { signal: controller.signal });
} finally {
  clearTimeout(timeoutId);
}
 
// AbortSignal.timeout() — 한 줄
const res = await fetch(url, {
  signal: AbortSignal.timeout(5000),
});

try {
  const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
} catch (err) {
  if (err.name === 'TimeoutError') {
    console.log('타임아웃!');
  }
  if (err.name === 'AbortError') {
    console.log('수동 취소!');
  }
}

const userController = new AbortController();
 
// 사용자가 취소하거나, 5초가 지나면 취소
const signal = AbortSignal.any([
  userController.signal,
  AbortSignal.timeout(5000),
]);
 
fetch('/api/data', { signal });
 
// 사용자가 취소 버튼 클릭
cancelButton.onclick = () => userController.abort();

// 등록
const onScroll = () => { /* ... */ };
const onResize = () => { /* ... */ };
const onMousemove = () => { /* ... */ };
 
window.addEventListener('scroll', onScroll);
window.addEventListener('resize', onResize);
window.addEventListener('mousemove', onMousemove);
 
// 정리 — 하나씩 제거해야 함
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize);
window.removeEventListener('mousemove', onMousemove);

const controller = new AbortController();
 
// 등록 — 같은 signal 공유
window.addEventListener('scroll', () => { /* ... */ }, { signal: controller.signal });
window.addEventListener('resize', () => { /* ... */ }, { signal: controller.signal });
window.addEventListener('mousemove', () => { /* ... */ }, { signal: controller.signal });
 
// 정리 — 한 번에 전부 제거
controller.abort();

// src/components/Header.astro
let scrollController: AbortController | null = null;
 
const bindHeaderScroll = () => {
  // 이전 리스너 정리
  scrollController?.abort();
  scrollController = new AbortController();
 
  window.addEventListener('scroll', () => {
    // 스크롤 방향에 따라 헤더 표시/숨김
  }, { passive: true, signal: scrollController.signal });
 
  // 페이지 전환 시 정리
  document.addEventListener('astro:before-swap', () => {
    scrollController?.abort();
    scrollController = null;
  }, { once: true });
};

function cancellableDelay(ms: number, signal: AbortSignal) {
  return new Promise<void>((resolve, reject) => {
    if (signal.aborted) {
      reject(signal.reason);
      return;
    }
 
    const timerId = setTimeout(resolve, ms);
    signal.addEventListener('abort', () => {
      clearTimeout(timerId);
      reject(signal.reason);
    });
  });
}
 
// 사용
const controller = new AbortController();
await cancellableDelay(3000, controller.signal);
 
// 취소
controller.abort();

async function poll(
  fn: () => Promise<boolean>,
  interval: number,
  signal: AbortSignal,
) {
  while (!signal.aborted) {
    const done = await fn();
    if (done) return;
    await cancellableDelay(interval, signal);
  }
}
 
// 사용: 작업 완료 여부를 3초마다 확인
const controller = new AbortController();
poll(
  () => fetch('/api/job/123').then(res => res.json()).then(d => d.done),
  3000,
  controller.signal,
);
 
// 페이지 이탈 시 폴링 중단
window.addEventListener('beforeunload', () => controller.abort());

const controller = new AbortController();
 
const response = await fetch('/api/stream', {
  signal: controller.signal,
});
 
const reader = response.body!.getReader();
 
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  appendToUI(value);
}
 
// 페이지 이탈 시 스트림 중단
window.addEventListener('beforeunload', () => controller.abort());

useEffect(() => {
  const controller = new AbortController();
 
  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') setError(err);
    });
 
  return () => controller.abort();
}, []);

useEffect(() => {
  const controller = new AbortController();
  const { signal } = controller;
 
  // 1. fetch
  fetch('/api/notifications', { signal })
    .then(res => res.json())
    .then(setNotifications)
    .catch(err => {
      if (err.name !== 'AbortError') setError(err);
    });
 
  // 2. 이벤트 리스너
  window.addEventListener('focus', () => {
    refetch();
  }, { signal });
 
  // 3. 폴링 타이머
  const intervalId = setInterval(() => {
    if (!signal.aborted) refetch();
  }, 30000);
  signal.addEventListener('abort', () => clearInterval(intervalId));
 
  // cleanup 한 줄
  return () => controller.abort();
}, []);

// Next.js Route Handler 예시
export async function GET(request: Request) {
  const chunks = await getWorkChunks();
  const results = [];
 
  for (const chunk of chunks) {
    // 각 단계마다 클라이언트 이탈 여부 확인
    if (request.signal.aborted) {
      return new Response(null, { status: 499 }); // 비표준, Nginx 관례
    }
    results.push(await processChunk(chunk));
  }
 
  return Response.json(results);
}