Fetch vs Axios

fetch와 axios는 둘 다 JavaScript에서 HTTP 요청을 보낼 때 사용되는 라이브러리입니다. 그러나 둘 사이에는 여러 차이점이 있습니다. 여기서는 각자의 장단점과 예제 코드를 비교해 보겠습니다.

1. fetch API

fetch는 기본적으로 브라우저에 내장된 함수입니다. 별도의 설치가 필요 없으며, 프로미스 기반의 HTTP 요청을 보낼 수 있습니다.

장점:

• 내장 API: 별도 설치가 필요 없음.
• 표준화: 브라우저에 표준적으로 내장된 API.

단점:

• 자동 오류 처리 부족: fetch는 네트워크 오류에만 오류 처리를 해주고, HTTP 상태 코드가 400이나 500일 경우 자동으로 오류를 던지지 않음. 따라서 명시적으로 처리해야 함.
• JSON 자동 변환 없음: JSON 응답을 수동으로 .json() 메서드를 사용해 파싱해야 함.
• 타임아웃 처리 없음: fetch에는 타임아웃 기능이 내장되어 있지 않아 별도로 구현해야 함.

예제 코드:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 수동으로 JSON 파싱
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

2. axios 라이브러리

axios는 별도의 설치가 필요한 외부 라이브러리입니다. (Node.js나 브라우저에서 사용 가능)

장점:

• 자동 JSON 변환: 응답 데이터를 자동으로 JSON으로 변환.
• 간단한 오류 처리: HTTP 상태 코드가 200이 아닐 경우 자동으로 오류를 던짐.
• 타임아웃 지원: 타임아웃 기능을 기본 제공.
• 요청 취소 가능: 요청을 취소할 수 있는 기능을 제공.
• Interceptors: 요청 및 응답에 대한 중간 처리가 가능함.

단점:

• 추가 설치 필요: npm이나 CDN을 통해 별도로 설치해야 함.
• 무거운 의존성: 작은 프로젝트에서 사용하기에 다소 무거울 수 있음.

설치:

npm install axios

예제 코드:

const axios = require('axios'); // Node.js 환경에서의 예시

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data)) // 자동으로 JSON 변환
  .catch(error => console.error('Axios error:', error));

주요 차이점 요약:

1. 내장 여부: fetch는 브라우저에 내장, axios는 외부 라이브러리.
2. JSON 파싱: fetch는 수동, axios는 자동.
3. 오류 처리: fetch는 네트워크 오류만 잡고, HTTP 오류는 수동 처리. axios는 자동으로 모든 오류를 처리.
4. 타임아웃: axios는 타임아웃을 기본 제공, fetch는 수동으로 구현해야 함.

두 라이브러리는 각자의 장단점이 있으니, 프로젝트의 필요에 따라 선택하면 됩니다.