axios
[JS] API 요청 / 비동기 작업 취소하기 - Abort Controller
[JS] API 요청 / 비동기 작업 취소하기 - Abort Controller
2024.05.14AbortController는 1개 이상의 API 요청을 취소할 때 사용하는 인터페이스다. 주로 중복 요청이 있을 때 이전 요청을 취소할 때 사용하며, 비동기 작업을 다룰 때도 활용할 수 있다. Axios 0.22 버전부터 AbortController를 이용해서 API 요청을 취소할 수 있다. Cancel 토큰을 이용하는 방식은 deprecated 됐다. 기본 사용 방법AbortController는 아래 3가지 단계로 사용한다. abortController.abort() 메서드를 호출하면 abort 이벤트가 발생하며 fetch 프로미스는 rejected 상태가 되고 제어는 catch 블럭으로 진입한다.AbortController 인스턴스 생성인스턴스의 signal 프로퍼티를 fetch의 signal 옵션..
[JS] 업로드 진행 이벤트를 처리하는 onUploadProgress
[JS] 업로드 진행 이벤트를 처리하는 onUploadProgress
2024.05.13Axios에서 업로드 진행 이벤트를 처리하는 onUploadProgress 핸들러를 이용해 업로드 진행 상황을 확인할 수 있다. 주로 업로드 진행 상태를 UI로 표현할 때 활용한다. onUploadProgress 핸들러는 ProgressEvent 네이티브 이벤트 객체를 인자로 받는다. ProgressEvent 객체는 아래 속성을 포함한다. — MDN loaded : 이미 수행한 작업의 양(업로드한 크기)을 나타내는 unsigned long long 형식의 데이터total : 작업의 총 양(총 파일 크기)을 나타내는 unsigned long long 형식의 데이터lengthComputable : 진행 상황 측정 가능 여부를 나타내는 Boolean 값 axios.post(api_url, formData, {..