프로젝트를 진행하면서 기존에는 내장 API 보다는 axios 사용해 개발을 했었다.

여러가지 이유가 있지만 interceptors등 Fetch API에 없는 기능을 axios에서 제공 해서 사용했다.

해당 게시글에서는 Fetch API 와 axios 의 기능을 비교해 보려고 한다.

Fetch API

주요 기능

• 브라우저 내장: Fetch API는 브라우저에 내장되어 있어 추가 설치가 필요 없다.
• Promise 기반: Fetch API는 Promise를 사용하여 비동기적으로 작동한다.
• 간단한 사용법: 기본적인 GET, POST 요청을 쉽게 구현할 수 있다.

장점

• 추가 설치가 필요 없다.
• 간단하고 직관적인 사용법.
• 네트워크 요청을 쉽게 다룰 수 있는 다양한 옵션 제공.

단점

• 에러 처리가 상대적으로 복잡하다.
• HTTP 오류 상태 코드를 자동으로 처리하지 않는다.
• 요청 취소를 위한 AbortController를 수동으로 설정해야 한다.

사용 예시

const fetchData = async () => {
  const response = await fetch('/api/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return await response.json();
};

const MyComponent = () => {
  useEffect(() => {
    fetchData()
      .then(data => console.log(data))
      .catch(error => console.error('Fetch error:', error));
  }, []);

  return <div>Check console for data</div>;
};

export default MyComponent;

Axios

주요 기능