Fetch API vs Axios: 2025년 기준 선택 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상자: 웹 애플리케이션 개발자, API 인터페이스 설계자, 프론트엔드/백엔드 엔지니어
- 난이도: 중간 (HTTP 요청 처리 방식, 라이브러리 특징 이해 필요)
핵심 요약
- Fetch API:
- 네이티브 웹 API로, Node.js v18 이상에서 지원
- Promise 기반, 네트워크 오류만 reject (HTTP 에러는 수동 처리)
- Zero dependency, 빌드 사이즈 최적화에 유리
- Axios:
- HTTP 에러 자동 reject, JSON 파싱 자동화
- 인터셉터 지원, 인증 토큰, 로깅 등 중앙 집중형 관리 가능
- 3rd-party 라이브러리로, 약 25-30 KB 추가
- 2025년 기준 권장 사항:
- 간단한 앱/스크립트: Fetch (라이브러리 무게 감소)
- 대규모 앱/인터셉터 필요: Axios (자동 에러 처리, 인터셉터 활용)
- 중간 선택지: ky 또는 ofetch (Fetch 기반, Axios UX 제공)
섹션별 세부 요약
1. Fetch API의 기본 특징
- 네이티브 지원: 모든 현대 브라우저 및 Node.js v18+에서 사용 가능
- Promise 기반 처리: 비동기 요청 시
response.json()수동 파싱 필요 - 에러 처리 한계: 네트워크 실패만 reject, HTTP 4xx/5xx는 수동 확인 필수
- 예시 코드:
```javascript
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) throw new Error(Status: ${response.status});
return response.json();
})
.catch(error => console.error('Fetch error:', error));
```
2. Axios의 핵심 기능
- 자동 JSON 파싱:
response.data에 직접 접근 가능 - HTTP 에러 자동 reject: 4xx/5xx 상태 코드 시
.catch()처리 가능 - 인터셉터 지원: 요청/응답 전단계에 인증 토큰 적용 가능
- 예시 코드:
```javascript
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('Axios error:', error.message));
```
3. 성능 및 빌드 사이즈 비교
- Fetch: 네이티브이므로 0 KB 추가 (라이브러리 무게 감소)
- Axios: 25-30 KB 추가 (gzipping 후)
- 취약점: Axios는 네트워크 성능 최적화에 부적합
4. 취소 기능 (Cancellation)
- Fetch:
AbortController사용 (복잡한 타임아웃 설정 필요) - Axios:
timeout속성으로 간단한 설정 가능 - 예시 코드 (Axios):
```javascript
axios.get('/data', { timeout: 5000 })
.catch(error => {
if (axios.isCancel(error)) console.log('Request timed out!');
});
```
5. 현대 앱 개발에 대한 선택 가이드
- 간단한 앱:
Fetch(라이브러리 무게 최소화) - 대규모 앱:
Axios(인터셉터, 자동 에러 처리) - 중간 선택지:
ky또는ofetch(Fetch 기반, Axios UX 제공)
결론
- 2025년 기준:
Fetch는 네이티브 기반으로 기본 선택지,Axios는 기능 풍부한 업그레이드로 활용 - 권장사항:
- 프로젝트 규모와 기능 요구사항에 따라 선택
- ky 또는 ofetch 같은 중간 라이브러리를 고려해보세요.