Fetch와 Axios, 뭐가 더 나을까?

fetch를 사용했던 이유와 오류 상황

 

개발 초창기, 나는 HTTP 통신을 할 때 주로 fetch 함수를 사용했다.

그 이유는 간단하다.

fetch는 자바스크립트의 내장 API였으므로 별도의 라이브러리를 설치하지 않아도 됐다.

또한, 기본적인 기능을 제공하면서 사용법이 직관적이어서 쉽게 배울 수 있었다.

그러나 최근 프로젝트에서 오류 상황을 겪고, 그 문제가 fetch의 오류 처리 방식 때문이라는 걸 깨달았다. 

네트워크 오류만 catch하는 fetch와 달리, axios는 HTTP 오류 상태 코드를 자동으로 catch해준다. 

이 경험으로 인해, 앞으로는 axios를 사용하기로  했다.

그렇다고 fetch가 나쁜 것은 아니다. 단지, 각 도구는 상황에 따라 장단점이 있을 뿐이다. 

이 포스팅에서는 fetch와 axios의 차이점을 알아보고, 어떤 상황에서 어떤 도구를 선택하는 것이 더 나은지 공유하려 한다.

 

 

fetch의 한계

 

내가 실제로 에러를 겪었던 상황을 설명해보자면,

서버로부터 데이터를 받아오는 작업을 fetch를 사용해 진행하고 있었다.

하지만 그 날, 서버 측에서 뭔가 문제가 발생했는지, 서버는 계속해서 500 오류 코드를 반환했는데

이 오류 코드는 성공적인 HTTP 요청으로 간주되었지만, 화면에는 로딩 화면 외에 아무것도 표시되지 않았다.

 

일반적으로, 500 오류는 서버 오류를 나타내는 HTTP 상태 코드이다. (애초에 성공으로 간주되면 안된다.)

fetch를 사용할 때 try, catch문을 사용해서 네트워크 오류처리를 해도 HTTP 상태 오류에 대한 에러 처리를

별도로 하지않으면 자동으로 catch 되지 않는다는 것을 처음 알게 되었다.

아래는 에러가 났던 코드이다.

나는 fetch가 네트워크 요청이 성공적으로 이루어졌는지, 아니면 실패했는지만 확인하면 되는 줄 알고 있었다.

 

fetch의 오류 처리 코드

//fetch 사용

const getOrders = async () => {
  try { 
    const response = await fetch('https://api.example.com/orders');
    const orders = await response.json();
    return orders;
  } catch (error) {
    console.error('네트워크:', error); //네트워크 에러처리 
  }
};

 

일반적으로 fetch를 사용하고 try, catch문으로 에러를 처리하면 대체로 네트워크 오류를 잘 잡아낸다.

여기서 말하는 '네트워크 오류'란, 서버에 연결할 수 없거나 요청이 타임아웃되는 등의 문제를 말한다.

그러나 fetch는 HTTP 상태 코드가 404, 500과 같이 오류를 나타내는 경우라도 이를 '성공한 프로미스'로 간주한다.
(위의 코드에서처럼 500에러는 HTTP 에러임에도 불구하고 성공으로 간주시켰다.)
이런 경우 response.ok 속성을 검사하여 HTTP 응답이 성공적인지 아닌지를 수동으로 코드를 작성하여 확인해야한다.

 

수정된 fetch 코드와 HTTP 에러 처리

//fetch 사용

const getOrders = async () => {
  try {
    const response = await fetch('https://api.example.com/orders');
    if (!response.ok) {
      throw new Error(`HTTP 오류! 상태: ${response.status}`); //HTTP 에러처리
    }
    const orders = await response.json();
    return orders;
  } catch (error) {
   console.error('검색 작업에 문제가 발생했습니다.', error); //네트워크 에러처리
  }
};

 

 

 

axios의 오류 처리

 

axios를 사용하면 HTTP 응답 상태 코드에 기반한 에러는 axios가 알아서 처리해주기때문에 

별도로 에러 처리를 작성하지 않아도 된다.

다시말해 axios는 HTTP 응답 상태 코드가 2xx 아닌 경우 자동으로 에러를 발생시키므로, 400, 500에러등을 자동으로 catch 할 수 있다. 따라서 개발자는 네트워크 에러만 처리해주면 되는데 이때 아래의 catch 블록은 네트워크 오류와 HTTP 에러를 모두 잡아내주고, axios는 HTTP 상태 코드가 2xx 범위 밖인 응답을 자동으로 거부하므로,

이런 상황에서는 프로미스가 거부되고 catch 블록이 실행되는 것이다. 

//axios 사용

const getOrders = async () => {
  try {
    const response = await axios.get('https://api.example.com/orders');
    return response.data;
  } catch (error) {
    console.error('HTTP 에러, 네트워크 에러 :', error);
  }
};

 

 

이를 통해 개인적으로 axios가 fetch보다 에러 처리에 있어 더 좋다는 사실을 깨닫게 되었다.

하지만 이것은 결국 내가 주로 다루는 프로젝트와 상황에 따라 달라질 수 있다는 것을 잊지 말아야 한다.

각각의 도구는 고유한 장점과 단점을 가지고 있고, 이러한 특성을 이해하는 것이 중요할 것 같다.