fetch GET 요청의 response와 axios GET(axios.get)의 response 차이

기록

fetch GET 요청의 response와 axios GET(axios.get)의 response 차이

als982001 2023. 6. 13. 22:24

과제테스트 연습 중, 갑자기 fetch와 axios를 이용해 GET 요청을 보냈을 때의 response의 차이점이 갑자기 궁금해져서, 이를 기록해둔다. 이용한 API는 Dog API(https://dog.ceo/dog-api/documentation/breed)이다.

// 요청하는 코드
const fetchDogs = async (breed: string) => {
	// breed: "maltese"
    
    const response = await fetch(
      `https://dog.ceo/api/breed/${breed}/images/random/3`
    );

    console.log("fetch");
    console.log(response);
    console.log("===");
    console.log("\n");

    const response2 = await axios.get(
      `https://dog.ceo/api/breed/${breed}/images/random/3`
    );

    console.log("axios");
    console.log(response2);
    console.log("===");
    console.log("\n");
  };

요청 결과는 다음과 같다.

fetch의 경우, 받은 응답을 .json 메서드를 이용하여야 원하는 데이터를 확인하고 이용할 수 있다. 하지만 axios는 바로 데이터를 확인하고 이용할 수 있다. 이의 예시는 다음과 같다.

const fetchDogs = async (breed: string) => {
    const response = await fetch(
      `https://dog.ceo/api/breed/${breed}/images/random/3`
    );

    console.log("fetch");

    const json = await response.json();
    console.log(json);
    console.log("===");

    const response2 = await axios.get(
      `https://dog.ceo/api/breed/${breed}/images/random/3`
    );

    console.log("axios");
    console.log(response2.data);
    console.log("===");
  };

이 코드의 결과는 다음과 같다.

axios는 별도의 과정 없이 데이터를 바로 이용할 수 있기에 fetch보다 더 좋다고 생각할 수 있지만, 또 마냥 그렇지만은 않다. 이에 대해 chatGPT에게 물어보았다.

질문: fetch와 axios를 서로 비교해서 설명해줘
답변: fetch와 axios는 JavaScript에서 네트워크 요청을 처리하는 두 가지 인기있는 방법입니다. 각각의 특징과 차이점을 살펴보겠습니다
1. 사용법
  - fetch: Fetch API는 브라우저 기본 내장 API이며, 기본적으로 제공됩니다. fetch 함수를 사용하여 네트워크 요청을 생성하고, 반환된 Promise를 사용하여 응답을 처리합니다.
  - axios: Axios는 자바스크립트의 HTTP 클라이언트 라이브러리로, axios 함수를 사용하여 네트워크 요청을 생성하고, 반환된 Promise를 사용하여 응답을 처리합니다. Axios는 브라우저와 Node.js 모두에서 사용할 수 있습니다.
2. 브라우저 지원
  - fetch: Fetch API는 최신 브라우저에서 널리 지원됩니다. 그러나 오래된 브라우저에서는 지원되지 않는 경우가 있으며, polyfill을 사용하여 지원할 수 있습니다.
  - axios: Axios는 브라우저와 Node.js 환경에서 동작하며, 모든 주요 브라우저에서 일관되게 지원됩니다.
3. 기능
  - fetch: Fetch API는 기본적인 네트워크 요청을 처리하는 기능을 제공합니다. 그러나 fetch 함수는 응답을 처리하기 위해 추가적인 작업이 필요합니다.
  - axios: Axios는 fetch에 비해 더 많은 기능을 제공합니다. 예를 들어, 요청과 응답의 중간에 인터셉터를 추가하여 요청 전후에 작업을 수행하거나, 요청과 응답 데이터의 자동 직렬화 및 역직렬화, 요청 취소 기능 등을 제공합니다.
4. 에러 처리
  - fetch: fetch는 네트워크 요청이 성공적으로 완료되더라도 HTTP 상태 코드가 200-299 범위에 속하지 않으면 에러로 처리합니다. 이는 네트워크 요청이 실패한 경우에도 catch 블록으로 이동하여 처리할 수 있다는 장점이 있습니다.
  - axios: Axios는 HTTP 상태 코드가 200-299 범위에 속하지 않는 경우에만 에러로 처리합니다. 또한, Axios는 HTTP 상태 코드 외의 오류나 네트워크 문제 등에 대해서도 추가적인 에러 처리 기능을 제공합니다.
5. 상황에 따른 선택
  - fetch: 기본 브라우저 API를 활용하고 싶거나, 간단한 요청 처리에 집중하고자 할 때 사용할 수 있습니다.
  - axios: 더 많은 기능과 편의성을 원하거나, 다양한 요청과 응답 처리 시나리오에 유연하게 대응해야 할 때 사용할 수 있습니다.
6. 결론적으로, fetch와 axios는 모두 네트워크 요청을 처리하는 라이브러리이지만, Axios는 더 다양한 기능과 브라우저 호환성을 제공하여 개발자들이 더 편리하게 네트워크 요청을 다룰 수 있도록 도와줍니다.

질문: 그럼 axios가 fetch보다 더 좋다고 할 수 있을까?
답변: "axios가 fetch보다 더 좋다"라는 것은 절대적인 판단이 아닙니다. 각각의 라이브러리는 상황과 개발자의 선호도에 따라 다른 장단점을 가지고 있습니다. 따라서 어떤 라이브러리가 더 좋은지는 사용하는 문맥과 요구사항에 따라 달라집니다.
- axios의 장점
  - 더 많은 기능과 편의성을 제공합니다. 예를 들어, 인터셉터를 사용하여 요청과 응답을 가로채고 수정할 수 있으며, 요청과 응답 데이터의 자동 직렬화 및 역직렬화, 요청 취소 기능 등을 제공합니다.
  - 브라우저와 Node.js 모두에서 사용할 수 있습니다.
  - 다양한 HTTP 요청 메서드(GET, POST, PUT, DELETE 등)와 헤더, 인증 등을 간편하게 설정할 수 있습니다.
- fetch의 장점
  - 기본적으로 브라우저에 내장되어 있어 별도의 설치가 필요하지 않습니다.
  - 최신 브라우저에서 널리 지원됩니다.
  - 간단한 요청 처리에 집중할 때 사용하기에 편리합니다.
- 따라서, 개발자는 프로젝트의 요구사항과 자신의 선호도를 고려하여 axios나 fetch 중 어떤 라이브러리를 선택할지 결정해야 합니다.

chatGPT를 통해 대략적인 차이점과 장단점을 알 수 있었다. 만약 더 자세히 알아야 할 필요가 있을 때에 다시 한 번 공식 문서 등을 통해서 공부해야겠다.

Dog API

https://dog.ceo/dog-api/documentation/breed