[JS] AbortController(): 웹 요청 / 비동기 작업을 취소 & 중단

📌 AbortController

: 웹 요청을 취소할 수 있는 기능

• 비동기 작업을 취소할 수 있도록 돕는 기능
• 다양한 비동기 작업을 중단할 때 사용한다.
  (ex. Fetch API, 네트워크 요청 취소, 타이머 중단, 이벤트 리스너 제거 등)
• 사용: 사용자가 취소하거나 중단할 수 있는 작업
  ex 1) 사용자가 파일 다운로드를 시작했지만, 중간에 취소 버튼을 클릭하면 다운로드 요청을 중단
  ex 2) 컴포넌트가 사라지거나 페이지가 이동되면 이전에 실행 중이던 네트워크 요청이 더 이상 필요하지 않으므로 중단
  ex 3) 네트워크 상태가 좋지 않아서 요청이 너무 오래 걸리는 경우, 일정 시간이 지나면 요청을 자동으로 중단
  

 

 

⏩ 작동 방식

1. AbortController()는 signal 객체를 생성 ➡︎ 이 signal 객체를 비동기 작업에 전달한다.
2. 비동기 작업이 실행되는 동안, AbortControlle.abort 메서드를 호출하여 작업을 중단할 수 있다.

 

 

 

✅ 사용

 

☑️ AbortController()

• AbortController 객체를 생성하여, 작업을 제어할 수 있는 signal 객체를 제공한다.

const controller = new AbortController();

 

 

 

 

☑️ AbortController.signal

• DOM 요청과 통신하거나 취소하는데 사용되는 AbortSignal 객체를 반환한다.
• signal을 비동기 작업에 전달
  
  • 비동기 작업을 시작할 때, 생성한 signal 객체를 옵션으로 전달해야 해당 비동기 작업을 취소할 수 있다.

const signal = controller.signal;

// 해당 비동기 함수에 signal을 전달해야 요청을 취소할 수 있다.
fetch('https://URL', { signal }) {
  // ...
}

 

 

 

 

☑️ AbortController.abort()

• 연결된 모든 비동기 작업이 완료되기 전에 취소할 수 있다.
  (ex.  fetch 요청, 스트림 취소 등)

controller.abort();

 

 

 

 

예제 1. Fetch 요청 취소

// 1. AbortController 객체를 생성합니다.
const controller = new AbortController();

// 2. controller.signal 객체를 가져옵니다.
const signal = controller.signal;

// 3. fetch 요청을 실행하고, 옵션으로 signal을 전달합니다.
fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => {
    console.log('Data:', data);  // 데이터가 성공적으로 받아지면 출력
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch request was aborted');  // 요청이 취소되었을 때 처리
    } else {
      console.error('Fetch error:', error);  // 다른 오류가 발생한 경우 처리
    }
  });

// 4. 3초 후에 요청을 취소합니다.
setTimeout(() => {
  controller.abort();  // 요청을 취소
}, 3000);

 

 

---

 

AbortController - Web API | MDN

 

AbortController.signal - Web API | MDN

 

AbortController.abort() - Web API | MDN