[240501 TIL] AbortController

오늘은 AbortController 라는 새로운 객체에 대해 알게되어 정리해보려고 합니다.

 

AbortController

AbortController는 하나 이상의 웹 요청을 취소할 수 있게 해주는 인터페이스 입니다.

 

기본동작

1.  생성

AbortController 객체는 생성자를 통해 호출합니다.

const controller = new AbortController();

 

2. 속성

AbortController 객체는 signal 이라는 속성을 가지고 있으며, 이 신호는 여러 요청에 사용될 수 있습니다.

const { signal } = controller;

 

3. 요청 취소

signal 을 fetch 의 옵션으로 사용하여 나중에 요청을 취소 할 수 있습니다.

fetch(url, { signal })
    .then(response => {
        return response.json();
    })
    .catch(error => {
        if (error.name === 'AbortError') {
            console.log('Fetch aborted');
        } else {
            console.log('Fetch error:', error);
        }
    });

 

4. abort 메서드

요청을 취소하려면 abort 메서드를 사용합니다. 이 메서드는 연결된 모든 요청에서 'AbortError' 를 발생시켜 요청을 중단합니다.

controller.abort();

 

사용상황

1. 타임아웃을 설정할 경우 : 사용자가 너무 오랫동안 응답을 기다리지 않도록 특정 시간 후에 네트워크 요청을 자동으로 취소하고 싶을 때 

2. UI 상호작용: 사용자가 로딩 중인 데이터를 더 이상 보고 싶어하지 않을 때, 예를 들어 페이지를 벗어나거나 취소 버튼을 클릭할 때 

3. 리소스 관리: 불필요한 네트워크 트래픽과 리소스 사용을 줄이기 위해 더 이상 필요하지 않은 요청을 중단

 

주의사항

일단 abort()가 호출되면, 해당 AbortController의 signal은 더 이상 사용할 수 없음!

새 요청에 사용하려면 새 AbortController를 생성해야 합니다.

 

전체 예시

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

fetch('https://example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch request was aborted by the developer.');
    } else {
      console.log('Other error occurred:', error);
    }
  });

// 특정 조건이 충족되면 요청을 취소
controller.abort();