axios - 요청 취소(AbortController)

api 요청 후 요청을 취소할 상황이 생길시...

 

api 호출 후 응답시간이 길 경우, response 너무 늦게와 의도치 않는 사이드 이펙트를 초래할 경우가 있다.

 

이럴 경우 api 호출을 중단 해야 하는데, 그런 상황에 사용하는것이 

AbortController

이다.

 

https://developer.mozilla.org/ko/docs/Web/API/AbortController

AbortController - Web API | MDN

 

사용법

// AbortController 생성
const controller = new AbortController();

abortBtn.addEventListener('click', function() {
  // api 요청을 abort 한다.
  controller.abort();
});

function fetchApi() {
  ...
    await axios
    .get(apiUrl, {
        signal: abortController.signal,
    })
    .then((response) => {
        res = response
    })
    .catch((error) => {
        throw error
    });
}

 

 

abort()가 호출되면, fetch() promise는 AbortError으로 명명된 DOMException과 함께 reject된다!