Dev/JavaScript
[HTTP] 비동기 요청 도구 Fetch, Axios 특징 비교
헝그리둘기
2025. 10. 29. 15:40
공통점
1. 비동기 요청으로, promise 리턴
2. 클라이언트와 서버 도메인이 다른 경우, 브라우저의 CORS 정책의 제한을 받음
Fetch
1. 자바스크립트 내장된 네이티브 함수
2. promise 리턴 (400, 500에러 떨어져도 resolve 처리. 통신 자체에 실패해야 reject 처리됨)
3. 응답 데이터를 res.json() 등의 비동기 함수로 파싱해서 사용해야함
4. 인터셉터 없음
5. 내장 기능인만큼 패키지 크기에 부담 없음
Axios
1. 써드파티 라이브러리로, 패키지 설치 후 사용해야 함
2. promise 리턴 (통신 실패는 물론이고 400, 500에러 떨어지면 reject 처리)
3. 응답 데이터가 자동으로 파싱되어서, res.data 로 꺼내서 쓰면 됨
4. 서버로 요청 쏘기 전, 응답 받은 후 인터셉터 사용 가능
5. 패키지 추가해야 하고 상대적으로 기능이 많아 크기가 큼