[Vue.js] fetch 대신 axios를 사용하는 이유

Jun 12, 2025

Contents

✅ 1. 응답 자동 변환 ✅ 2. 에러 처리 방식 ✅ 3. 요청/응답 인터셉터 (interceptors)✅ 4. 타임아웃 설정 ✅ 5. 브라우저 호환성 ✅ 6. 파일 업로드/다운로드 편의성 🔽 단점도 존재 ✅ 결론: 언제 어떤 걸 써야 할까?

fetch 대신 axios를 사용하는 이유는 편의성, 기능성, 호환성 측면에서 axios가 더 많은 장점을 제공하기 때문입니다.

✅ 1. 응답 자동 변환

axios는 응답을 자동으로 JSON으로 파싱해줌


// axios
axios.get('/api').then(res => console.log(res.data));

// fetch
fetch('/api')
  .then(res => res.json())
  .then(data => console.log(data));

✔ fetch는 .json()을 매번 직접 호출해야 함

✔ axios는 .data로 바로 접근 가능

✅ 2. 에러 처리 방식

fetch는 네트워크 에러(서버 다운 등)만 catch로 잡힘

HTTP 에러(404, 500 등)는 성공으로 간주됨


// fetch는 status 체크 필요
fetch('/api').then(res => {
  if (!res.ok) throw new Error('에러 발생!');
  return res.json();
});

// axios는 상태 코드가 4xx, 5xx면 catch로 바로 감
axios.get('/api')
  .then(res => console.log(res.data))
  .catch(err => console.error('에러 발생:', err));

✅ 3. 요청/응답 인터셉터 (interceptors)

공통 헤더 추가, 토큰 주입, 로딩 처리 등을 가로채서 쉽게 처리 가능


axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

fetch는 이 기능이 없어, 매 요청마다 수동으로 처리해야 함

✅ 4. 타임아웃 설정

axios는 타임아웃 간단 설정 가능


axios.get('/api', { timeout: 3000 });

fetch는 기본적으로 타임아웃 없음. 직접 AbortController로 구현해야 해서 번거로움

✅ 5. 브라우저 호환성

fetch는 IE 등 구형 브라우저에서 기본적으로 지원되지 않음

axios는 내부적으로 XMLHttpRequest 기반이라 더 넓은 호환성 보장

✅ 6. 파일 업로드/다운로드 편의성

axios는 FormData, Blob 처리, 응답 타입 설정 등을 더 쉽게 다룸

🔽 단점도 존재

단점	설명
용량	axios는 약 15~20KB 크기로 fetch보다 무거움
의존성	외부 라이브러리 설치 필요 (`npm install axios`)

✅ 결론: 언제 어떤 걸 써야 할까?

상황	추천 방식
간단한 요청 (GET 등)	`fetch`로도 충분
에러 처리, 토큰 주입 등 공통 로직 필요	`axios` 추천
파일 업로드, 응답 데이터 구조 통일	`axios` 유리
Vue/React 등에서 API와 대규모 통신	`axios` 선호됨

Contents

// fetch는 status 체크 필요 fetch('/api').then(res => { if (!res.ok) throw new Error('에러 발생!'); return res.json(); }); // axios는 상태 코드가 4xx, 5xx면 catch로 바로 감 axios.get('/api') .then(res => console.log(res.data)) .catch(err => console.error('에러 발생:', err));