[Fetch와 Axios] HTTP 요청을 위한 두 가지 방식 비교

728x90

Fetch와 Axios 

웹 애플리케이션에서 서버와 통신할 때 가장 많이 사용하는 방법은 HTTP 요청입니다. 이때 사용하는 대표적인 도구가 바로 Fetch API와 Axios입니다. 이 글에서는 두 방식의 사용법과 차이점을 예제와 함께 설명하고, 실무에서 어떤 상황에 어떤 도구를 선택하면 좋을지 정리해드립니다.

 

---

1.  Fetch API란?

Fetch API는 브라우저에 내장된 기본 HTTP 통신 기능입니다. 별도 설치 없이 사용 가능하며, Promise 기반으로 동작합니다.

기본 사용 예제

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

특징

• 브라우저 내장 기능 (Node.js에서는 node-fetch 또는 undici 필요)
• 기본적인 기능만 제공 (자동 JSON 처리, 타임아웃, 요청 취소 등은 직접 구현해야 함)
• 가볍고 최소한의 통신만 필요할 때 적합

 

---

2.  Axios란?

Axios는 Fetch보다 더 많은 기능을 기본 제공하는 외부 라이브러리입니다. 설치가 필요하지만, 실무에서 매우 널리 쓰입니다.

npm install axios

기본 사용 예제

import axios from 'axios';

axios.get('https://api.example.com/users')
  .then(response => console.log(response.data))
  .catch(error => console.error('Axios error:', error));

특징

• 자동으로 JSON 파싱
• 요청 및 응답 인터셉터 제공
• 요청 취소, 타임아웃 기본 지원
• 브라우저와 Node.js 양쪽에서 동작 가능
• 응답 객체 구조가 일관됨 (response.data, response.status 등)

 

---

3.  주요 비교표

항목	Fetch API	Axios
설치 필요 여부	X (브라우저 내장)	O (npm install axios)
응답 JSON 처리	.then(res => res.json()) 필요	자동 처리 (response.data)
요청 취소	AbortController 필요	CancelToken 제공
기본 타임아웃	없음	설정 가능 (timeout: 1000 등)
인터셉터	직접 구현 필요	axios.interceptors로 쉽게 설정
응답 형식	다양하고 불안정	일관된 구조 (data, status 등)
브라우저 지원	대부분 지원	모든 주요 브라우저 + Node.js 지원

 

---

4.  실무에서는 어떤 걸 써야 할까?

a.  Fetch를 선호하는 경우

• 별도 라이브러리 없이 가볍게 HTTP 요청을 하고 싶을 때
• 번들 사이즈를 줄이는 것이 중요한 프로젝트

b.  Axios를 선호하는 경우

• 인터셉터, 타임아웃, 에러 핸들링 등 고급 기능이 필요한 경우
• Node.js 환경에서도 HTTP 요청을 동일한 방식으로 처리하고 싶은 경우
• 대규모 프로젝트에서 유지보수성과 일관성을 중요시할 때

 

---

5.  예제 : POST 요청 비교

a.  Fetch

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Alice' })
})
  .then(res => res.json())
  .then(data => console.log(data));

b.  Axios

axios.post('https://api.example.com/users', { name: 'Alice' })
  .then(res => console.log(res.data));

• Axios는 POST 요청 시 Content-Type 헤더와 JSON.stringify() 처리를 자동으로 해줍니다.

 

---

6.  마무리

• Fetch : 가볍고 브라우저에 기본 내장. 작은 프로젝트나 단순 요청에 적합합니다.
• Axios : 다양한 기능과 편의성이 뛰어남. 실무에서 널리 사용됩니다.

 

---