AbortController

AbortController

• 자바스크립트의 웹 API 중 하나로, 요청을 취소할 수 있는 기능 제공
• axios와 함께 사용할 경우, 네트워크 요청을 중단하는데 유용

개념

• fetch API와 함께 사용되도록 설계된 인터페이스로, 요청을 취소할 수 있는 신호 (Abortsignal)을 제공
• 이를 통해 오래 걸리는 요청이나 불필요한 요청을 중단할 수 있음
• 컴포넌트나 스코프의 어디에서든 선언이 가능

예시

1. AbortController를 생성하고, 그 안의 signal을 axios요청에 전달
2. 1초 뒤에 controller.abort()를 호출
3. axios는 AbortController에서 전달된 signal을 감지하고 요청을 중단
4. 요청이 취소되면 .catch블록에서 취소된 요청을 처리

import axios from "axios";

const controller = new AbortController(); // AbortController 인스턴스 생성
const signal = controller.signal; // AbortSignal 가져오기

axios
	.get("...", {signal})
	.then((response) => {
		console.log(response.data)
	})
	.catch((error) => {
		if (axios.isCancel(error)) {
			console.log("요청 취소", error.message)
		} else {
			console.log("요청 중 오류 발생", error
		}
	})
	
	
// 일정 시간 후 요청 취소
setTimeout(() => {
	controller.abort(); // 요청 중단
	console.log("abortController를 사용해 요ㅓㅇ 중단")
}, 1000)

사용

1. 사용자 인터페이스 업데이트 : 사용자가 검색어를 빠르게 입력하면 이전 요청을 중단, 최신 검색어로만 결과를 받아오도록 그 전 요청 취소
2. 시간 초과 관리 : 네트워크가 느린 경우, 일정 시간이 지나면 요청을 취소하여 리소스를 절약
3. 불필요한 요청 제거 : 컴포넌트가 언마운트될 때, 진행 중인 네트워크 요청을 취소하여 메모리 누수를 방지