Axios vs Fetch 사용법

초보자를 위한 Axios vs Fetch

백엔드 또는 타사 API에 네트워크 요청을 해야 하는 애플리케이션을 구축할 때 Axios 및 Fetch와 같은 HTTP 클라이언트를 사용하여 이러한 요청을 수행합니다. 

이 가이드에서는 Axios와 Fetch를 소개하고 비교하여 정보에 입각한 결정을 내릴 수 있도록 합니다.

Fetch 및 Axios에 대한 간략한 개요

fetch()Fetch API는 네트워크 요청을 만들기 위해 호출되는 메서드를 노출하는 인터페이스입니다 . 최신 브라우저에 내장되어 있으므로 설치할 필요가 없습니다. node.js의 실험적 기능 으로도 사용할 수 있습니다 .

Axios는 Content Distribution Network 또는 CDN을 통해 프로젝트에 추가하거나 npm 또는 yarn과 같은 패키지 관리자를 통해 설치할 수 있는 타사 라이브러리입니다. Axios는 브라우저 또는 node.js 환경 내에서 실행할 수 있습니다.

Fetch와 axios는 둘 다 약속 기반 HTTP 클라이언트입니다. 이것은 우리가 네트워크 요청을 만들기 위해 사용할 때 해결하거나 거부할 수 있는 약속을 반환한다는 것을 의미합니다. 

액시오스 설치

node.js 환경에서 Axios를 사용하는 경우 다음 설치 방법 중 하나를 사용할 수 있습니다. 

1. NPM을 사용하여 설치:

npm install axios

2. Yarn을 사용하여 설치:

yarn add axios

그런 다음 프로젝트로 가져와야 합니다.
import axios from "axios";브라우저 내에서 Axios를 사용하는 경우 CDN을 사용할 수 있습니다. 여기에서
Axios를 설치하는 모든 방법을 읽을 수 있습니다 . 이제 모든 것이 설치되었으므로 비교해 보겠습니다.

Fetch와 Axios의 기능 비교

구문부터 시작하겠습니다.

사용법

Fetch는 두 가지 인수를 허용합니다. 첫 번째 인수는 가져오려는 리소스의 URL입니다. 두 번째는 요청을 만들기 위한 구성 옵션을 포함하는 개체인 선택적 인수입니다. 따라서 구문은 다음과 같습니다.

구성 옵션이 없으면 요청은 기본적으로 GET 요청을 생성합니다.
fetch(url)구성 옵션을 사용하면 다음을 포함하는 요청에 대한 몇 가지 사용자 지정 설정을 정의할 수 있습니다.

fetch(url, {
  method: 'GET', // other options: POST, PUT, DELETE, etc.
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({}),
})

Axios 구문은 비슷하지만 이를 호출하는 방법에는 여러 가지가 있습니다.

axios(url, {
  // configuration options
})

다음과 같이 HTTP 메서드를 추가할 수도 있습니다.

axios.get(url, {
  // configuration options
})

가져오기 메서드와 마찬가지로 axios의 HTTP 메서드를 무시하고 다음과 같이 기본적으로 GET으로 설정할 수 있습니다. 
axios(url)마찬가지로 두 번째 인수를 사용하여 요청에 대한 일부 사용자 지정 설정을 정의할 수 있습니다.

axios(url, {
  method: 'get', // other options: post, put, delete, etc.
  headers: {},
  data: {},
})

다음과 같이 작성할 수도 있습니다.

axios({
  method: 'get',
  url: url,
  headers: {},
  data: {},
})

이제 Axios와 가져오기가 응답을 처리하는 다양한 방식을 살펴보겠습니다.

JSON 데이터 처리

아래 예제에서는 JSONPlaceholder라는 REST API 에 GET 요청을 수행하여 가져오기와 Axios를 모두 사용하여 할 일 항목 목록을 가져오고 차이점을 비교합니다.

Fetch API를 사용하는 코드는 다음과 같습니다.

const url = "https://jsonplaceholder.typicode.com/todos";

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

콘솔의 결과는 다음과 같습니다.

fetch()메서드 에서 응답을 처리하는 약속을 반환 합니다 .then() . 이 시점에서 필요한 JSON 데이터 형식이 없으므로 .json()응답 개체에서 메서드를 호출합니다. 이것은 JSON 형식의 데이터로 해결되는 또 다른 약속을 반환합니다. 따라서 일반적인 가져오기 요청에는 두 개의 .then()호출이 포함됩니다.

그러나 Axios를 사용하여 동일한 가져오기를 수행하는 경우 다음 코드가 있습니다.

const url = "https://jsonplaceholder.typicode.com/todos";

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

Axios를 사용하면 기본적으로 응답 데이터를 JSON으로 사용할 수 있습니다. 응답 데이터는 항상 data응답 개체의 속성에서 사용할 수 있습니다.

responseType다음과 같이 구성 옵션에서 지정하여 기본 JSON 데이터 유형을 재정의할 수 있습니다 .

axios.get(url, {
  responseType: 'json' // options: 'arraybuffer', 'document', 'blob', 'text', 'stream'
})

자동 문자열화

이제 JSONPlaceholder API를 사용하여 데이터를 전송해 보겠습니다 . 

이렇게 하려면 데이터를 JSON 문자열로 직렬화해야 합니다. 메서드 를 사용하여 JavaScript 개체를 API에 보낼 때  POST Axios는 자동으로 데이터를 문자열화합니다.

다음 코드는  post Axios를 사용하여 요청을 수행합니다.

const url = "https://jsonplaceholder.typicode.com/todos";

const todo = {
  title: "A new todo",
  completed: false
} 

axios.post(url, {
  headers: {
    'Content-Type': 'application/json',
  },
  data: todo
})
.then(console.log);

axios를 사용하여 요청을 할 때   요청 본문으로 보낼 을 data 속성에 post 할당합니다  . data콘텐츠 유형 헤더를 설정할 수도 있습니다. 기본적으로 axios는  Content-Type 로  설정됩니다 application/json.

응답 개체를 살펴보겠습니다.

응답 데이터는 response.data다음과 같은 위치에 있습니다.

.then(response => console.log(response.data));

JSON.stringify()Fetch API를 사용하는 경우 를 사용하여 개체를 수동으로 문자열화 한 다음 body요청 에 할당 해야 합니다 .

const url = "https://jsonplaceholder.typicode.com/todos";

const todo = {
  title: "A new todo",
  completed: false
};

fetch(url, {
  method: "post",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(todo)
})
  .then((response) => response.json())
  .then((data) => console.log(data))

Content-Type또한 Fetch를 사용하여 를 명시적으로 설정해야 합니다 application/json.

오류 처리

fetch와 axios는 모두 해결되거나 거부된 약속을 반환합니다. 약속이 거부되면 오류를 처리하는 데
사용할 수 있습니다 . .catch()Axios로 오류를 처리하는 방법은 Fetch 방법과 비교할 때 더 간결합니다.

axios부터 시작하여 일반적인 오류 처리는 .catch()다음과 같습니다.

const url = "https://jsonplaceholder.typicode.com/todos";

axios.get(url)
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });

Axios의 약속은 상태 코드가 2xx 범위를 벗어나면 거부됩니다. responseerr 개체에 a 또는 request다음과 같은 속성이 포함되어 있는지 확인하여 오류에 대한 자세한 정보를 확인할 수 있습니다 .

.catch((err) => {
  // handling error
  if (err.response) {
    // Request made and server responded

    const { status, config } = err.response;

    if (status === 404) {
      console.log(`${config.url} not found`);
    }
    if (status === 500) {
      console.log("Server error");
    }
  } else if (err.request) {
    // Request made but no response from server
    console.log("Error", err.message);
  } else {
    // some other errors
    console.log("Error", err.message);
  }
});

오류 객체의 속성은 response클라이언트가 2xx 범위를 벗어난 상태 코드로 오류 응답을 수신했음을 나타냅니다. 오류 개체의 속성 request은 요청이 있었지만 클라이언트가 응답을 받지 못했음을 나타냅니다. 그렇지 않고 요청 또는 응답 속성이 없으면 네트워크 요청 설정에 오류가 발생한 것입니다.

Fetch.AI는 404 오류 또는 기타 HTTP 오류가 발생해도 약속을 거부하지 않습니다. 가져오기는 네트워크가 실패할 때만 약속을 거부합니다. 따라서 조항 내에서 HTTP 오류를 수동으로 처리해야 합니다 .then.

다음 코드를 살펴보겠습니다. 

const url = "https://jsonplaceholder.typicode.com/todos";

fetch(url) 
  .then((response) => {
    if (!response.ok) {
      throw new Error(
        `This is an HTTP error: The status is ${response.status}`
      );
    }
    return response.json();
  })
  .then(console.log)
  .catch(err => {
    console.log(err.message);
  });

응답 블록에서 응답의 ok 상태가 false인지 확인한 다음 블록에서 처리되는 사용자 정의 오류를 발생시킵니다 .catch.

다음과 같이 응답 객체에서 사용할 수 있는 메서드를 살펴볼 수 있습니다.
.then(console.log)

위의 스크린샷은 성공적인 가져오기에 대한 것입니다. 잘못된 URL 엔드포인트에 도달하는 상황에서 ok 및 속성은  각각 오류를  status 발생시키고 false 절  은 사용자 지정 오류 메시지를 표시합니다.404.catch()

응답 시간 초과/요청 취소

이러한 HTTP 클라이언트가 HTTP 요청에 대한 응답 시간 초과를 처리하는 방법을 살펴보겠습니다. timeoutAxios를 사용하면 구성 개체에 속성을 추가하고 요청이 종료되기 전 시간(밀리초)을 지정할 수 있습니다.

다음 스니펫에서는 요청이 4초 이상 걸리면 요청을 종료한 다음 콘솔에 오류를 기록하는 것을 목표로 합니다.

const url = "https://jsonplaceholder.typicode.com/todos";

axios.get(url, {
  timeout: 4000, // default is `0` (no timeout)
})
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });

Fetch로 요청을 취소하려면 AbortController 인터페이스를 사용할 수 있습니다 . 아래 사용법을 참조하십시오.

const url = "https://jsonplaceholder.typicode.com/todos";

const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => controller.abort(), 4000);

fetch(url, {
  signal: signal
})
  .then((response) => response.json())
  .then(console.log)
  .catch((err) => {
    console.error(err.message);
  });

우리는 개체를 만드는 것으로 시작하여   개체와  메서드 controller 에 대한 액세스 권한을 얻었습니다   .  그런 다음 구성 옵션을 통해  객체를 에  전달했습니다  . 이를 통해 가져오기 요청은 abort 메서드가 호출될 때마다 종료됩니다. 보시   다시피 함수의 도움으로 서버가 4초 안에 응답하지 않으면 작업이 종료됩니다.signalabort()signalfetch()setTimeout

성능

Fetch와 axios는 모두 약속 기반이므로 성능 문제를 일으키지 않아야 합니다. 그러나 여전히 measurethat.net을 사용하여 성능을 측정할 수 있습니다 .

온라인 도구를 사용하여 연속적으로 테스트한 결과 다음과 같은 결과가 나타났습니다 .

그래프:

위에서 볼 수 있듯이 기본 Fetch는 axios보다 약간 빠릅니다. 두 클라이언트가 모두 비동기식이므로 이는 중요하지 않습니다.

브라우저 지원

Axios 및 Fetch는 최신 브라우저에서 널리 지원됩니다. ES6 Promises를 지원 하지 않는 IE 11과 같은 이전 환경의 경우 polyfill을 사용해야 합니다 . 또한 Fetch의 경우 특히 이전 브라우저 에서 구현을 지원하기 위해 또 다른 polyfill을 추가 할 것입니다 .

결론

이 가이드에서는 Fetch와 axios에 대해 논의하고 실제 시나리오를 사용하여 실질적으로 비교했습니다. 결국 프로젝트에서 선택하는 항목은 개인적인 선호도와 사용 편의성에 따라 달라집니다.