개발을 진행하면서 fetch 나 axios 등을 통해 웹과 통신하는 작업은 매우 자주 일어난다.
그 과정에서 요청을 중단하고 싶은 경우, 어떤 방식을 통해 중단을 할 수 있는지 정리해보려고 한다.
fetch
AbortController.signal: 요청을 중단하는 경우 사용되는AbortSignal객체를 반환
AbortController.abort(reason): 요청을 중단할 수 있는 메서드
과정
AbortController()생성자를 통해controller라는 인스턴스를 생성한다.
abortSignal이라는 변수에controller인스턴스의signal객체를 할당한다.
fetch()의options객체의signal에abortSignal객체를 할당한다.
$abortBtn의 클릭을 통해 요청을 중단하는controller.abort()메서드를 호출한다.
(이때
abort() 의 인자값으로 reason 텍스트를 전달하면 abortSignal.reason 을 통해 확인할 수 있다.)- 요청이 중단되는 경우,
catch문을 통해 에러를 확인할 수 있다.
axios
CancelToken.source(): 취소 토큰을 생성하는 팩토리 메서드
source.cancel(message): 요청을 중단할 수 있는 메서드
과정
source변수에CancelToken.source()를 통해 생성한 취소 토큰 정보를 담고 있는 객체를 할당한다.
axios의config객체의cancelToken에source.token값을 할당한다.
$abortBtn의 클릭을 통해 요청을 중단하는source.cancel()메서드를 호출한다.
axios.isCancel(err)를 통해 중단 여부를 체크해서 에러를 확인할 수 있다.
실행 결과
요청을 중단하면 [개발자 도구 - Network] 탭에서 해당 요청의 Status 가 pending 에서 canceled 로 변경되는 것을 확인할 수 있다.
활용
- React 환경에서 컴포넌트가 언마운트 되는 동작(페이지 이동, 조건부 렌더링)을 하는 경우,
useEffect의 cleanup 함수에 요청 중단 기능을 적용하여 불필요한 요청을 방지할 수 있다.
- 무거운 파일을 다운로드 받는 경우, 다운로드 취소 버튼을 통해 사용자가 다운로드를 취소할 수 있다.
이렇게 웹 요청 시 요청을 중단하는 방법을 정리해봤는데 정리하면서 지금까지 알지 못했던 성능 개선 방법을 하나 더 알게 되어서 조금 뿌듯했다.
특히
useEffect 의 cleanup 함수를 통해 적용하는 방법은 앞으로 자주 활용해봐야겠다는 생각이 들었다.참고
