💡 딥다이브 주제

[데이터 통신] Axios와 Fetch API의 차이점을 비교하고, 실제 프로젝트에서 각각을 어떤 상황에 사용하는 것이 적합한지 설명하세요.

Axios와 Fetch API 개요

---

Axios와 Fetch API는 웹 애플리케이션에서 서버와 데이터를 주고받기 위해 사용하는 HTTP 요청 라이브러리.

모두 Promise 기반의 비동기 요청 방식을 사용

Fetch

• 브라우저에 내장되어 있어 따로 설치할 필요가 없다.

Axios

• 서드파티 라이브러리로, npm같은 패키지 매니저를 통해 설치해야 한다.

  npm install axios

Fetch와 Axios 기능 비교 (차이점)

---

1. 문법

fetch

• 두번째 인자 생략할 경우, 기본적으로 GET 요청

fetch('http://localhost:4444/hello');

• 설정 옵션 (요청 방식, 헤더 설정 등)

fetch("http://localhost:4444/posts", {
  method: "POST", // POST
  headers: { // 헤더 조작
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ // 보낼 데이터 본문은 body에 할당 
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})

axios

• 두번째 인자 생략할 경우, 기본적으로 GET 요청

axios('http://localhost:4444/hello');

• 두 번째 인자를 사용해 커스텀 설정 가능

axios("http://localhost:4444/posts", {
  method: "get", // 다른 옵션도 가능합니다 (post, put, delete, etc.)
  headers: {},
  data: {}, // 보낼 데이터 본문은 data에 할당
});

axios.get(url, {
  // 설정 옵션
});

2. JSON 데이터 처리

GET으로 받아온 응답 처리 비교

fetch

• 프로미스 객체가 반환되므로 JSON 형식으로 바꿔주어야 한다. response.json()

fetch("http://localhost:4444/posts")
  .then((response) => response.json())
  .then((data) => console.log(data));

axios

• 응답 데이터가 기본적으로 JSON타입이다. 응답 데이터는 data 프로퍼티에서 사용할 수 있다.

axios.get("http://localhost:4444/posts")
	.then((response) => console.log(response.data));

3. 자동 문자열 변환 (stringify)

데이터를 전송하는 post 요청을 해보자.

fetch

• JSON.stringify() : JSON객체를 문자열로 변환한 뒤 body에 할당해야 한다.

const todo = {
  title: "A new todo",
  completed: false,
};

fetch("https://jsonplaceholder.typicode.com/todos", {
  method: "post",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(todo),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

axios

• 요청 본문(request body)으로 보낼 데이터는 data 프로퍼티에 할당한다. 개발자가 직접 문자열로 변환할 필요없다. Axios가 자동으로 데이터를 문자열로 변환해준다.

const todo = {
  title: "A new todo",
  completed: false,
};

axios
  .post("https://jsonplaceholder.typicode.com/todos", {
    headers: {
      "Content-Type": "application/json",
    },
    data: todo,
  })
  .then(console.log);

4. 에러 처리

fetch

• Fetch는 네트워크 오류가 없으면 네트워크 요청을 성공했다고 판단. (상태코드와 무관)

  즉, 네트워크 연결이 제대로 되어 서버로부터 응답이 왔다면, 그 응답이 200번대인지, 400번대, 500번대인지 상관없이 요청이 “성공적으로 완료”된 것으로 간주한다.

  4xx, 5xx 상태코드가 반환되어도 fetch()는 reject되지 않고 응답 객체를 resolve 한다.
  

• HTTP 에러 코드가 있어도 catch로 잡히지 않는다.

• 따라서 개발자 도구를 통해 ok속성이나 직접 상태코드를 확인해야 한다.

  (ok 속성이 true 이면 2xx라는 뜻. false이면 2xx대가 아님을 의미.)

• 예시코드

  const url = "https://jsonplaceholder.typicode.com/todos";
  
  fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw new Error(
          `This is an HTTP error: The status is ${response.status}`
        );
      }
      return response.json();
    })
    .then(console.log)
    .catch((err) => {
      console.log(err.message);
    });

axios

• fetch와 달리, 200번대가 아닌 상태코드를 오류로 간주한다.
• 즉, 4xx나 5xx 상태코드가 반환되면 요청 실패로 간주하고 promise를 reject한다.
• 에러가 나면 catch 블록에서 처리할 수 있도록 한다.
• 예시코드

  .catch((err) => {
  // 에러 처리
  if (err.response) {
  // 요청이 이루어졌고 서버가 응답했을 경우
  
      const { status, config } = err.response;
  
      if (status === 404) {
        console.log(`${config.url} not found`);
      }
      if (status === 500) {
        console.log("Server error");
      }
  
    } else if (err.request) {
      // 요청이 이루어졌으나 서버에서 응답이 없었을 경우
      console.log("Error", err.message);
    } else {
      // 그 외 다른 에러
      console.log("Error", err.message);
    }
  });

5. 타임아웃 설정 (응답시간 초과 / 요청 취소)

HTTP 클라이언트에서 요청 시간이 초과될 경우 어떻게 처리하는지 알아보자.

axios

Axios에서는 타임아웃을 쉽게 설정할 수 있다. 요청을 보낼 때 timeout 옵션을 추가하면 된다.

• 참고) 타임아웃이란? 타임아웃 설정은 HTTP 요청을 보낼 때 응답을 기다리는 시간을 제한하는 기능입니다. 일정 시간 안에 응답이 없으면 요청을 취소하고, 타임아웃 에러를 발생시켜 프로그램이 멈추거나 지연되지 않도록 합니다. 이는 네트워크 불안정이나 서버 응답이 지연될 때 유용하게 사용됩니다.
  

axios.get('https://example.com/api', {
  timeout: 5000 // 타임아웃을 5000ms (5초)로 설정
})
  .then(response => {
    console.log(response.data);
  })

fetch

Fetch API에는 기본적으로 타임아웃 기능이 없어서, 직접 구현해야 한다. (AbortController를 사용해야 함.)

결론

---

axios VS fetch 어떤 방법을 선택해야 할까?

	axios	fetch
설치여부	따로 라이브러리 설치 필요	현대 브라우저에 빌트인이라 설치 필요 없음
형식변환	자동으로 형식 변환	.json() 와 .stringify() 를 사용해 변환해주는 과정 필요
타임아웃	요청취소가능, 타임아웃 쉽게 설정 가능	타임아웃 기능 없음.
에러처리	2xx 이외의 상태코드는 에러로 처리. 상태코드별 에러처리 편리.	네트워크 에러만 요청실패로 간주. 4xx, 5xx 상태코드도 성공으로 간주. 에러처리 불편.
브라우저	다양한 브라우저 지원	지원되지 않는 브라우저가 있음

프로젝트에서 어떤 방법을 선택할 지는 개인의 선호도와 사용 편의성에 따라 달라진다.

axios는 별도의 설치가 필요하다는 단점이 있다. 하지만, fetch보다 더 많은 기능을 지원하고 문법이 조금이나마 간소화 된다는 장점이 있다.

간단하게 사용할때는 별도의 설치가 필요없는 fetch를 사용하고, 확장성을 염두했을 땐 axios를 쓰는것이 좋을것이라 생각한다.

참고자료)

• https://www.meticulous.ai/blog/fetch-vs-axios
• https://velog.io/@eunbinn/Axios-vs-Fetch#%EC%9D%91%EB%8B%B5-%EC%8B%9C%EA%B0%84-%EC%B4%88%EA%B3%BC--%EC%9A%94%EC%B2%AD-%EC%B7%A8%EC%86%8C
• https://dev-astra.tistory.com/583