AbortController

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

AbortController.AbortController() 생성자를 사용해 새로운 AbortController 를 생성한다. AbortSignal 객체를 사용해 DOM 요청과의 통신이 완료된다.

AbortController 인터페이스

interface AbortController {
  // DOM 요청과 통신하거나 취소하는데 사용되는 AbortSignal 객체 인터페이스를 반환한다.
  readonly signal: AbortSignal;
  
  //DOM 요청이 완료되기 전에 취소한다. 이를 통해 fetch 요청, 모든 응답 Body 소비, 스트림을 취소할 수 있다.
  abort(): void;
}

예시

let controller = new AbortController();
fetch(url, {
  signal: controller.signal
});

controller.abort();

위의 코드를 보면 controller인스턴스를 생성한 후에 fetch할 때, 파라미터 값 signal에 controller.signal을 넘겨주면 등록이 된다.

그 후, controller.abort()를 호출하면 프로미스 객체는 ‘AbortError’에러를 던지고 reject한다.

let controller = new AbortController();
let signal = controller.signal;

// triggers when controller.abort() is called
signal.addEventListener('abort', () => alert("abort!"));

controller.abort(); // abort!

alert(signal.aborted); // true

또한, signal에 이벤트를 등록하면 abort가 되었는지 추적할 수 도 있다.


Node.js V15.0.0에서는 AbortController 기능을 지원할 예정이다.

nodejs 공식문서


브라우저 호환성

abort controller

참조 및 출처


[Ju Chan Hwang]
Written by@[Ju Chan Hwang]
JUlog에 오신걸 환영합니다🤗 저에 대해 궁금하다면, 👆제 이름을 눌러보세요

GitHubFacebook