자바스크립트에서 비동기 작업(fetch API)을 중단할 수 있도록 도와주는 API

Promise는 취소 기능이 없지만, AbortController로 특정 요청을 강제로 취소할 수 있음

원리

AbortController는 비동기 작업을 제어하기 위한 signal 객체를 제공

controller.abort()를 호출하면 해당 signal을 감지하는 모든 요청이 즉시 취소

controller.abort()가 호출되면 fetch() 요청은 즉시 중단 → catch()에서 AbortError를 감지

여러 개의 Fetch 요청 한번에 취소

const controller = new AbortController(); 
const { signal } = controller; 

const fetchData = (url) => fetch(url, { signal }) // fetch에 signal을 전달해야 함
.then((res) => res.json()); 

Promise.all([ 
    fetchData("<https://jsonplaceholder.typicode.com/todos/1>"), 
    fetchData("<https://jsonplaceholder.typicode.com/todos/2>"), 
]) 
.then((data) => console.log("📌 데이터:", data)) 
.catch((error) => { 
    if (error.name === "AbortError") { 
    	console.log("🚨 모든 요청이 취소되었습니다."); 
    } else { 
    	console.error("❌ 오류 발생:", error); 
    } 
}); 

// 1초 후 모든 요청 취소 
setTimeout(() => { controller.abort(); }, 1000);

Promise에 적용

const controller = new AbortController(); 
const { signal } = controller;

const asyncTask = new Promise((resolve, reject) => { 
    const timeout = setTimeout(() => { 
        resolve("✅ 작업 완료!"); 
    }, 5000); 
	
    // `abort` 이벤트가 발생하면 작업 취소 
    signal.addEventListener("abort", () => { 
    	clearTimeout(timeout); 
		reject(new Error("❌ 작업이 취소되었습니다.")); 
	}); 
}); 

asyncTask 
.then(console.log) 
.catch(console.error); 

// 2초 후 강제 취소 
setTimeout(() => { controller.abort(); }, 2000);

AbortController의 한계