[250220] Fetch와 Axios란?

Fetch와 Axios란?

1. Fetch와 Axios 정의

`fetch`와 `axios`는 JavaScript에서 HTTP 요청을 보내는 데 사용되는 라이브러리 및 API이다.
둘 다 클라이언트에서 서버로 데이터를 요청하고 응답을 받는 데 사용되며, RESTful API와 함께 자주 활용된다.

✅ Fetch vs Axios 비교

비교 항목	Fetch API	Axios
기본 제공 여부	브라우저 내장 API	외부 라이브러리 (설치 필요)
사용법	`.then()` 또는 `async/await` 사용	`.then()` 또는 `async/await` 사용
응답 처리	`Response` 객체를 명시적으로 `.json()`으로 변환해야 함	JSON 자동 변환
오류 처리	HTTP 상태 코드 오류를 직접 처리해야 함	자동으로 오류를 throw
요청 취소	지원 안 함	`AbortControlle`r 또는 `axios.CancelToken` 지원
요청 및 응답 변형	설정이 번거로움	인터셉터 기능 제공
브라우저 호환성	대부분의 최신 브라우저에서 지원	IE와 같은 구형 브라우저에서도 polyfill을 사용하면 지원 가능

---

2. Fetch API

`fetch()`는 Promise 기반의 HTTP 요청 API로, 브라우저에서 기본적으로 제공된다.
주로 RESTful API 요청을 보낼 때 사용된다.

1️⃣ GET 요청

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())  // JSON 변환
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

• `fetch()`는 기본적으로 GET 요청
• `response.json()`을 호출해야 JSON 데이터를 사용할 수 있음
• `.catch()`로 네트워크 오류를 처리하지만, HTTP 상태 오류(예: 404)는 자동으로 throw되지 않음

 

2️⃣ POST 요청

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "New Post",
    body: "This is a new post",
    userId: 1
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));

• `method`: HTTP 요청 메서드 지정 (`POST`, `PUT`, `DELETE` 등)
• `headers`: `Content-Type`을 명시해야 JSON 데이터 전송 가능
• `body`: JSON 데이터를 문자열(`stringify`)로 변환하여 전달

 

3️⃣ 오류 처리 (HTTP 상태 코드 체크)

fetch("https://jsonplaceholder.typicode.com/posts/invalid")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

• `response.ok`를 체크해야 HTTP 오류(404, 500 등)도 감지 가능

 

4️⃣ 요청 취소 (`AbortController`)

const controller = new AbortController();
const signal = controller.signal;

fetch("https://jsonplaceholder.typicode.com/posts", { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === "AbortError") {
      console.error("Fetch aborted!");
    }
  });

controller.abort(); // 요청 취소

• `AbortController`를 사용하면 요청을 중단 가능
• 특정 상황에서 네트워크 요청을 취소할 때 유용

---

3. Axios

`axios`는 Fetch API보다 더 간결한 코드 작성 및 다양한 기능 제공이 가능한 HTTP 클라이언트 라이브러리이다.
`npm` 또는 `yarn`을 통해 설치 후 사용 가능하다.

# sh
npm install axios

 

1️⃣ `GET` 요청

import axios from "axios";

axios.get("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => console.log(response.data))
  .catch(error => console.error("Error:", error));

• Fetch와 달리 `response.data`에 JSON 데이터가 자동으로 들어감
• HTTP 오류 상태 코드도 자동으로 예외 발생

 

2️⃣ `POST` 요청

axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "New Post",
  body: "This is a new post",
  userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error("Error:", error));

• `headers` 없이도 JSON 데이터를 자동 변환하여 전송 가능

 

3️⃣ 요청과 응답 변형 (인터셉터)

Axios는 요청과 응답을 중간에서 변형할 수 있는 인터셉터 기능을 제공한다.

axios.interceptors.request.use(config => {
  config.headers.Authorization = "Bearer my-jwt-token"; // 요청 헤더 추가
  return config;
});

• 모든 요청에 자동으로 토큰 추가 가능
• Fetch API로 구현하려면 매번 `headers`를 설정해야 함

 

4️⃣ 요청 취소 (`CancelToken`)

const source = axios.CancelToken.source();

axios.get("https://jsonplaceholder.typicode.com/posts", {
  cancelToken: source.token
})
.then(response => console.log(response.data))
.catch(error => {
  if (axios.isCancel(error)) {
    console.error("Request canceled:", error.message);
  }
});

source.cancel("Request aborted manually.");

• `Axios`는 네트워크 요청을 중단할 수 있는 기능을 기본 제공

---

4. Fetch vs Axios 정리

비교 항목	Fetch API	Axios
JSON 자동 변환	❌ (`response.json()` 필요)	✅ (`response.data`로 바로 접근 가능)
오류 처리	❌ (HTTP 오류는 직접 처리)	✅ (자동으로 오류 throw)
요청 취소	✅ (`AbortController` 사용)	✅ (`CancelToken` 사용)
요청 & 응답 변형	❌ (매번 수동 처리)	✅ (인터셉터 기능 제공)
요청 반복 실행	❌ (반복 호출 필요)	✅ (자동 재시도 설정 가능)
브라우저 호환성	최신 브라우저 지원	구형 브라우저까지 지원

Fetch와 Axios 정리:
1. Fetch는 기본적으로 내장된 API로, 간단한 요청을 처리할 때 적합하다~
2. Axios는 JSON 변환, 오류 처리, 인터셉터 기능 등 추가 기능이 많아 사용이 더 편리하다~
3. 요청을 중단하거나, 인증 토큰을 자동으로 추가하는 기능이 필요하면 Axios를 사용하는 것이 유리하다~
4. 최신 브라우저 환경에서는 Fetch가 가볍고 빠른 대안이 될 수도 있다~