Fetch: Abort

Fetch는 Promise를 리턴합니다.

그런데 Javascirpt에는 Promise에 사실 "Aborting"개념이 따로 없습니다. 그러면 우리는 진행 중인 Fetch를 어떻게 중단/취소 할 수 있을까요? 더는 fetch가 필요없어졌을때처럼요.

 

이런 목적을 위해 특별한 빌트인 객체가 있습니다. 바로 AbortController입니다. 해당 객체는 fetch뿐만 아니라 비동기적인 모든 작업에 사용할 수도 있습니다.

 

사용법은 매우 직관적입니다.

 

let controller = new AbortController();

: abort() 라는 메서드 하나만 가지고 있습니다.

: signal이라는 프로퍼티 하나만 가지고 있습니다. 이벤트리스너를 등록할 수 있는 것입니다.

 

abort( ) 가 만약 호출되면,

: controller.signal이 'abort'이벤트를 발생시킵니다.

: controller.signal.aborted 프로퍼티가 true로 바뀝니다.

 

일반적으로 2개의 수행이 있습니다.

1. controller.signal에 리스너를 등록하는 작업, 즉 취소연산을 만드는 작업

2. 필요할 때 contoller.abort()를 부르는 작업

// 예시 코드

let controller = new AbortController();

let signal = controller.signal;
signal.addEventListener('abort', () => alert('aborted!'));

controller.abort(); // 'abort!' is alerted

alert(signal.aborted); // 확인하면 signal의 aborted는 true로 바뀌어있음.

: 정리하면 AbortController 는 abort이벤트가 발생했을 때, 미리 등록해놓은 이벤트를 넘겨주는 작업.

: 동일한 기능을 그냥 이벤트리스너로도 등록가능은 하다 물론.

: 하지만, fetch가 AbortController객체가 어떤 식으로 동작하는 지 알고 있기 때문에 잘 통합될 수 있다. 

 

fetch와 함께 사용해보는 예제

 

1. fetch할 때, signal프로퍼티를 미리 controller의 signal로 등록해준다.

let controller = new AbotrtController();

let url = 'XXX';
fetch(url, {
	signal: controller.signal;
});

: 이제 fetch는 AbortContoller의 존재를 알고, signal의 abort 이벤트를 확인한다.(listen)

 

2. 그리고 abort를 발생시켜보면,

controller.abort();

: fetch는 signal로부터 위의 abort이벤트가 발생한 사실을 알게 되고, request를 중단하게 된다.

: 만약 fetch가 abort되면, AbortError와 함께 reject가 되돌려진다. 이건 물론 예상 가능한 에러 컨트롤이므로 try...catch 사용해서 잡아야 한다. 

 

AbortController의 마지막 특징은 scalarble하다는 것인데, 다수의 fetch를 한 번에 취소할 수 있다는 말입니다.

let urls = [...]; // 다수의 url

let controller = new AbortController();

let fetchJobs = urls.map(url => fetch(url, {
	signal = controller.signal
});

let results = await Promise.all(fetchJobs);

: 요런 상황에서 만약 어디 한 군데서라도 controller.abort()가 발생했다면 전체 fetch가 중단됩니다.

 

 

 

---

 

출처:

https://ko.javascript.info/fetch-abort#ref-3326

Fetch: Abort

: 모든 내용은 해당 사이트의 내용을 공부하며 그대로 외워 써내려간 것 입니다.

참고 사이트 방문하면 더 확실한 내용을 확인할 수 있습니다.