[node.js] axios와 fetch의 비교

'왜 axios가 아니라 fetch를 쓰세요?' 팀플을 하다가 질문을 받았다.  

 

나는 개발할 때 정말 이 기능이 우리 프로젝트에 필요한가 많이 잰 후에 도입하는 편이다. 

그래서 그러게영..??? 뭐가 더 좋은지 아세요?했더니 우리 팀원들 모두 모른대서 이렇게 직접 알아보게 되었다 😀

피드백 수용이 굉장히 빠른 편!ㅎ

 

 

✅ fetch와 axios 차이점

1.JSON 처리
2. 자동 문자열 변환(stringify)
3. Error 처리 
4. 성능 => 아주 작은 차이

 

 

1. JSON 처리 

보통 개발을 할 때 requestDto, responseDto를 만들기 때문에 response를 json으로 파싱해 사용한다. 

 

fetch문을 보자. 2개의 then()이 필요하다.

그런데 response.json도 비동기 처리라 서버 응답이 도착한 후에 JSON으로 변환하는 과정이 비동기적으로 이루어지기 때문에, 실제 JSON 데이터가 사용 가능한 상태가 되기까지 시간이 걸릴 수 있다는 단점이 있다.

fetch(url)
  .then((response) => response.json())
  .then(console.log);

 

패키지 설치가 필요하지만 axios를 쓰면 자동으로 데이터를 json 파싱해 data라는 property로 받을 수 있다. 

axios.get(url).then((response) => console.log(response.data));

 

 

 

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

 

명시해주어야 하는 문법인 fetch

fetch의 경우 json으로 보내기 위해 개발자가 적어줘야할게 많다.

fetch(url, {
  method: 'POST', // default : get
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
});

 

자동 변환으로 간결한 axios

axios의 경우 자동으로 content-type을 자동 지정해주고 데이터 또한 Json.stringify() 처리해준다. 

axios.post(url, data);

 

 

 

3. Error 처리

 

Network만을 감지하는 fetch

네트워크 에러를 catch할 수 있지만, HTTP 오류 상태(예: 404, 500 등)는 에러로 간주하지 않고, 정상 응답으로 반환한다.

이때문에 나머지 에러는 수동으로 상태 코드를 확인해야 한다.

fetch('https://api.example.com/data')
  .then((response) => {
    if (!response.ok) {
      // 네트워크 에러가 아닌 경우의 에러 처리를 위해 
      // http 상태 코드를 확인하는 코드가 별도로 필요하다.
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    // 네트워크 에러나 HTTP 에러 처리
    console.error('Fetch error:', error.message);
  });

 

 

Http Error Code를 감지하는 axios

axios는 HTTP 오류 상태 코드를 자동으로 catch 해서 에러로 간주해준다. 

axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error('Axios error:', error));

 

 

 

4. 성능

여기서 같은 기능을 두고 성능을 비교할 수 있는데, fetch가 조금 더 빠른 것을 볼 수 있다. 

https://www.measurethat.net/Benchmarks/Show/17766/0/axios-vs-fetch#latest_results_block

드디어 fetch가 더 좋은 이유가 나왔구나!!!

 

 

 

지금 진행하고 있는 프로젝트에서는 axios가 문법이나 개발 편의성이 좋아 통일하기로 했다. 

MS 개발자분은 axios가 아니라 fetch를 더 많이 쓴다고 하셨는데 정말 저 근소한 속도 때문일까?

알아본 걸로는 axios가 더 좋아보이고 아무리 검색을 해봐도 성능에 큰 영향이 없어 axios를 권장한다는 글 뿐이다. 

지식은 늘었지만 궁금증은 해소되지 않았다... 😭