JavaScriptMedium#411
AbortController를 사용해 fetch 요청을 취소해야 하는 상황과 구현 방법을 설명해주세요.
#JavaScript#fetch#AbortController#비동기
답변 포인트
검색 자동완성, 컴포넌트 언마운트, 중복 요청 취소 상황을 떠올려보세요.
정답 및 해설
빠른 요약
AbortController는 진행 중인 비동기 작업, 특히 fetch 요청을 명시적으로 취소하기 위한 Web API입니다. 사용자가 검색어를 빠르게 바꾸거나, 화면을 이동해 더 이상 응답을 사용할 필요가 없을 때 유용합니다.
AbortController는 진행 중인 비동기 작업, 특히 fetch 요청을 명시적으로 취소하기 위한 Web API입니다. 사용자가 검색어를 빠르게 바꾸거나, 화면을 이동해 더 이상 응답을 사용할 필요가 없을 때 유용합니다.
예를 들어 자동완성 검색에서 이전 요청이 늦게 도착하면 최신 검색 결과를 덮어쓰는 문제가 생길 수 있습니다. 이때 새 요청을 보내기 전에 이전 요청을 abort하면 불필요한 네트워크 사용과 UI 꼬임을 줄일 수 있습니다.
TypeScript
let controller: AbortController | null = null;
async function search(keyword: string) {
controller?.abort();
controller = new AbortController();
try {
const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
signal: controller.signal,
});
return await res.json();
} catch (error) {
if (error instanceof DOMException && error.name === 'AbortError') {
return null;
}
throw error;
}
}React에서는 useEffect cleanup에서 abort하는 패턴이 자주 쓰입니다. 단, 요청을 취소했다고 서버 작업이 항상 중단되는 것은 아닙니다. 클라이언트가 응답을 더 이상 기다리지 않을 뿐이며, 서버도 취소 신호를 처리하도록 설계해야 진짜 비용 절감이 됩니다.