FetchAPI와 axios 장단점과 차이

Fetch API

"Request Aborting"은 웹 개발 및 네트워크 통신에서 자주 사용되는 용어로, 클라이언트나 서버가 HTTP 요청을 중간에 중단하는 상황을 가리킵니다. 이는 여러 가지 이유로 발생할 수 있으며, 다음과 같은 상황들이 포함될 수 있습니다:

사용자 취소

사용자가 웹 브라우저에서 페이지 로딩을 취소하거나, 이전 페이지로 돌아가는 등의 행동을 할 때 발생합니다. 이 경우, 브라우저는 서버로 보내는 HTTP 요청을 중단시킵니다.

타임아웃

서버가 일정 시간 내에 응답하지 않으면 클라이언트가 요청을 중단할 수 있습니다. 이는 네트워크 지연이나 서버의 과부하로 인해 발생할 수 있습니다.

코드 오류

웹 애플리케이션에서 잘못된 코드나 버그로 인해 요청이 중단될 수 있습니다. 예를 들어, JavaScript 코드에서 fetch API를 사용하여 요청을 보내는 도중 에러가 발생하면 요청을 중단할 수 있습니다.

리소스 부족

클라이언트나 서버가 메모리 부족 등으로 인해 요청을 처리할 수 없을 때, 요청을 중단시킬 수 있습니다.

"Request Aborting"은 HTTP 요청 라이브러리나 API에서 abort 메소드를 통해 직접적으로 수행될 수도 있습니다. 예를 들어, JavaScript의 Fetch API를 사용할 때는 AbortController를 사용하여 요청을 중단할 수 있습니다:

const controller = new AbortController();
const signal = controller.signal;

fetch('/some-url', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// 요청을 중단하고 싶을 때
controller.abort();

이처럼 "Request Aborting"은 요청을 효율적으로 관리하고 필요에 따라 중단함으로써 시스템 자원을 절약하고 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

Fetch API와 Axios 장단점

Fetch API

Fetch API는 브라우저 내장 API로, 최신 브라우저에서 기본적으로 지원됩니다.

장점:

브라우저 내장: 별도의 설치가 필요 없고, 모든 최신 브라우저에서 기본적으로 제공됩니다.
Promise 기반: Fetch API는 Promise를 사용하여 비동기 작업을 수행하므로, 비동기 코드를 작성하는 것이 간편합니다.
유연성: Fetch API는 요청과 응답을 조작하는 데 많은 유연성을 제공합니다.

단점:

오래된 브라우저 지원 부족: 인터넷 익스플로러와 같은 오래된 브라우저에서는 Fetch API가 지원되지 않습니다.
에러 처리 제한: HTTP 400 또는 500 에러는 자동으로 잡히지 않고, 반드시 응답 객체의 ok 속성을 확인해야 합니다.
기본 설정 없음: 기본 헤더 설정, 응답 데이터 자동 변환 등의 기능이 기본적으로 제공되지 않습니다. 이를 위해 추가적인 코딩이 필요합니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

Axios

Axios는 브라우저와 Node.js 환경에서 사용할 수 있는 HTTP 클라이언트 라이브러리입니다.

장점:

광범위한 지원: 브라우저뿐만 아니라 Node.js에서도 사용할 수 있습니다.
자동 변환: JSON 데이터의 자동 변환이 기본으로 제공됩니다.
인터셉터: 요청 또는 응답 전에 작업을 수행할 수 있는 인터셉터 기능을 제공합니다.
타임아웃 설정: 요청 타임아웃을 쉽게 설정할 수 있습니다.
취소 기능: 요청을 취소할 수 있는 기능이 내장되어 있습니다.
단순한 API: Fetch보다 간결한 API를 제공합니다.

단점:

추가 종속성: Fetch와 달리 외부 라이브러리를 설치해야 합니다.
패키지 크기: Fetch에 비해 상대적으로 더 많은 패키지 크기를 가질 수 있습니다.

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Axios error:', error));

주요 차이점 요약

설치와 지원:

Fetch는 브라우저에 내장되어 있고, 최신 브라우저에서 기본 제공됩니다.
Axios는 별도로 설치해야 하며, 브라우저와 Node.js 모두에서 사용 가능합니다.
에러 처리:

Fetch는 네트워크 에러만 catch 블록에서 잡히며, HTTP 에러는 수동으로 확인해야 합니다.
Axios는 HTTP 에러도 catch 블록에서 자동으로 잡아줍니다.
기능성:

Fetch는 기본적으로 제공하는 기능이 적고, 추가적인 설정이나 코딩이 필요합니다.
Axios는 기본적인 설정과 기능을 더 많이 제공하며, 인터셉터, 자동 변환, 타임아웃 설정 등이 포함되어 있습니다.
결론
단순한 프로젝트: Fetch API는 별도의 설치 없이 간단하게 사용할 수 있어서 작은 프로젝트에 적합합니다.
복잡한 요구사항: Axios는 더 많은 기능과 편리한 인터페이스를 제공하여, 복잡한 HTTP 요청을 자주 사용하거나 Node.js 환경에서도 동작해야 하는 프로젝트에 더 적합합니다.