[Vue.js] fetch 대신 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));

✅ 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 처리, 응답 타입 설정 등을 더 쉽게 다룸

🔽 단점도 존재

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