fetch vs axios: 쉽게 알아보는 4가지 핵심 차이점!

 

fetch vs axios: 쉽게 알아보는 4가지 핵심 차이점!

 

fetch와 axios는 모두 외부 리소스를 가져오는 라이브러리인데요, 비동기적으로 동작하면서 Promise 객체를 반환합니다.

 

이 두 라이브러리는 비슷해 보이지만, 몇 가지 차이점이 있습니다. 주로 4가지 차이점이 있는데, 지금부터 하나씩 알아보겠습니다.

 

1. 설치 방법
2. HTTP 메서드 통신
3. JSON 데이터 가져오기 방법
4. 에러 처리

 

1. 설치 방법

 

fetch는 브라우저에 기본적으로 내장된 라이브러리라서 따로 설치하지 않아도 됩니다.

 

반면, axios는 설치가 필요합니다. 아래 명령어로 설치할 수 있습니다.

yarn add axios  
npm install axios

 

그리고 모듈을 import하는 과정도 필요합니다.

import axios from "axios";

2. HTTP 메서드 통신

fetch와 axios는 HTTP 메서드를 이용한 통신 방식에 차이가 있는데요, 각각의 호출 방식이 다릅니다.

 

fetch로 POST 통신

fetch로 POST 요청을 보낼 때는 두 번째 인자에 method: "POST"를 명시해야 합니다.

[fetch] POST 통신 예시

export default function Index() {
  const onButtonClick = () => {
    const params = {
      method: "POST",
      body: JSON.stringify({ name: "수" }),
    };
    fetch("/api/user", params);
  };

  return (
    <div>
      <button onClick={onButtonClick}>눌러봐!</button>
    </div>
  );
}

 

axios로 POST 통신

 

반면, axios는 post 메서드가 제공되기 때문에, 그 함수를 사용해서 간단하게 POST 요청을 보낼 수 있습니다.

 

또한, 두 번째 인자로 파라미터를 전달하기만 하면 HTTP 요청 본문에 자동으로 추가되므로, fetch처럼 JSON으로 변환할 필요가 없어서 코드가 더 간결해집니다.

[axios] JSON 데이터 전송 예시

import axios from "axios";

export default function Index() {
  const onButtonClick = () => {
    axios.post("/api/user", { name: "수" });
  };

  return (
    <div>
      <button onClick={onButtonClick}>눌러봐!</button>
    </div>
  );
}

 

참고로, post 외에도 get, put, delete 메서드가 있어서 fetch보다 더 직관적으로 API에 접근할 수 있습니다.

 

3. JSON 데이터 가져오기 방법

세 번째로는 JSON 데이터를 가져오는 방식에 차이가 있습니다.

fetch로 JSON 데이터 가져오기

fetch로 반환된 JSON 데이터는 먼저 response 객체로 받아온 후, 그 안에서 JSON 데이터를 추출해야 합니다.

[fetch] JSON 데이터 가져오기 예시

export default function Index() {
  const onButtonClick = () => {
    fetch("/api/user")
      // 응답에서 JSON 데이터 추출
      .then((response) => response.json())
      .then((user) => alert(`이름: ${user.name}`));
  };

  return (
    <div>
      <button onClick={onButtonClick}>눌러봐!</button>
    </div>
  );
}

 

axios로 JSON 데이터 가져오기

 

반면, axios는 response.data로 바로 JSON 데이터를 가져올 수 있습니다.

[axios] JSON 데이터 가져오기 예시

import axios from "axios";

export default function Index() {
  const onButtonClick = () => {
    axios.get("/api/user").then((response) => alert(`이름: ${response.data.name}`));
  };

  return (
    <div>
      <button onClick={onButtonClick}>눌러봐!</button>
    </div>
  );
}

4. 에러 처리

HTTP 상태 코드 404(찾을 수 없음)나 500(서버 오류)을 받았을 때의 에러 처리 방식에도 차이가 있습니다.

 

fetch의 404 처리

fetch는 HTTP 상태 코드가 404나 500인 경우에도 에러를 발생시키지 않고, then 메서드를 계속 실행합니다.

 

예를 들어, 아래 코드에서 URL이 존재하지 않아 404가 반환되더라도 "성공했습니다!"라는 메시지가 표시되는데요.

[fetch] 404에서도 성공 메시지 표시

export default function Index() {
  const onButtonClick = () => {
    fetch("/ABC")
      .then(() => alert("성공했습니다!"))
      .catch(() => alert("에러입니다!"));
  };

  return (
    <div>
      <button onClick={onButtonClick}>눌러봐!</button>
    </div>
  );
}

 

왜 404에서도 then이 실행되냐면, fetch의 역할은 "요청을 보내고 응답을 받는 것"이기 때문입니다.

 

404나 500 상태 코드라도 응답 자체가 있으면 정상적인 요청으로 간주하고, resolve하여 then을 실행하는 것이죠.

 

따라서 fetch를 사용할 때는 응답이 정상(200)인지 여부를 추가로 확인해야 하는데요.

 

아래 코드에서는 response.ok(상태 코드가 200~299 범위일 때)로 응답 상태를 확인하고 있습니다.

 

[fetch] 404일 경우 에러 메시지 표시

export default function Index() {
  const onButtonClick = () => {
    fetch("/ABC")
      .then((response) => {
        // 상태가 OK일 경우에만 성공 메시지 표시
        response.ok ? alert("성공했습니다!") : alert("에러입니다!");
      })
      .catch(() => alert("에러입니다!"));
  };

  return (
    <div>
      <button onClick={onButtonClick}>눌러봐!</button>
    </div>
  );
}

axios의 404 처리

반대로, axios는 404나 500 상태 코드가 반환되면 자동으로 에러를 발생시킵니다.

 

많은 사람들이 이 방식이 더 직관적이고 다루기 쉽다고 느낄 겁니다.

[axios] 404에서 에러 메시지 표시

import axios from "axios";

export default function Index() {
  const onButtonClick = () => {
    axios.get("/ABC")
      .then(() => alert("성공했습니다!"))
      .catch(() => alert("에러입니다!"));
  };

  return (
    <div>
      <button onClick={onButtonClick}>눌러봐!</button>
    </div>
  );
}

 

결론

 

• axios는 더 간결하게 코드를 작성할 수 있습니다. axios는 HTTP 요청 본문을 JSON으로 변환할 필요 없이, 두 번째 인자로 파라미터를 전달하기만 하면 됩니다.

 

• axios는 더 직관적인 코드 작성이 가능합니다. HTTP 메서드인 post, get 등의 메서드가 이미 준비되어 있기 때문입니다.

 

• 또한, axios는 404(찾을 수 없음)나 500(서버 오류) 상태 코드가 반환되면 자동으로 에러를 발생시킵니다.

 

---