요청 취소

AbortController

• AbortController는 웹 요청 취소를 할 수 있게 해주는 API이다. axios에서도 CancelToken대신 AbortController를 권장한다고 한다.

  axios의 github 리드미를 보면 CancelToken은 v0.22.0부터 deprecated되었다고 한다. (사용이 권장되지 않음)
  (공식문서에도 해당 내용이 있음)

axios에서 AbortController 사용하기

const controller = new AbortController();

axios.get(url, {
   signal: controller.signal
}).then((res) => {
	
});
// cancel the request
controller.abort()

1. new AbortController()로 새로운 객체를 생성한다.
2. axios에 signal옵션에 생성한 AbortController 객체의 signal 프로퍼티를 넣는다.

• signal : DOM 요청과 통신하거나 취소하는데 사용하는 AbortSignal 객체 인터페이스를 반환

3. controller.abort()함수를 호출해 요청을 취소한다.

• 요청 취소를 에러핸들링하고 싶다면 다음과 같이 할 수 있다.

.catch((err) => {
  if (err.name == 'AbortError') { // handle abort()
    alert("Aborted!");
  }
})

출처)
모던 자바스크립트 fetch-abort
abortcontroller-and-fetch-how-to-distinguish-network-error-from-abort-error