nodeJS - axios fetch 활용

nodeJS의 HTTP와 같은 네트워크 요청을 진행할때 대표적인 모듈인 axios와 fetch에 대해서 핵심적인 부분들을 알아보고자 한다.

fetch 와 axios 소개

fetch는 기본적으로 대부분의 브라우저에서 내장하고 있기때문에 별도의 설치 없이 바로사용이 가능하다는 장점이 가장 크다고 할 수 있다. 그리고 가장 최신 기능들이 여기에 먼저 들어간다.
자세한 기능은 Mozila 개발자 포럼에서 확인이 가능하다.
Fetch 사용하기 - Web API | MDN (mozilla.org)

axios는 fetch보다 사용등에 개발 편의성을 고려해 만들어진 패키지이다.
axios는 fetch보다 아래와 같은 장점을 가지고 있다.

XSRF 보호
data 속성으로 object를 포함
status가 200와 statusText로 응답 객체를 세분화
자동으로 JSON데이터 형식으로 변환
요청을 취소 및 타임아웃 가능
HTTP 요청을 가로채기 가능
download 진행율 기본 지원

axios의 경우 별도의 설치가 필하며, npm 이나 yarn과 같은 패키지 매니저를 이용하여 설치할 수 있다.

그리고 fetch 와 axios는 모두 promise 기반으로 동작한다.
(promise(프로미스)는 자바스크립트 비동기 처리에 사용되는 객체)
즉 이 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve) 혹은 거부(reject)할 수 있는 promise가 반환된다.

작은 프로젝트에서 간단하게 사용할때는 fetch를 쓰고, 이외에는 axios 를 사용하는 것이 좋다고 할 수 있다.

fetch 와 axios 사용

axios는 먼저 npm을 이용하고 설치후 사용이 가능하다. 이후 import axios from "axios";를 프로젝트 파일에 추가하여 사용할 수 있다.

npm install axios

기본 호출

가장 기본적인 호출로 별도의 인자를 넣지 않을 경우 두가지 모두 get 방식으로 동작한다.
fetch

fetch(url);

//메소드 변경
fetch(url, {
  method: "GET", // POST, PUT, DELETE 등을 지정할 수 있다.
  headers: {
    "Content-Type": "application/json",
  },
  body: {}
});

axios

axios(url);

// 메소드 변경
// axios는 2가지를 제공한다.
axios.get(url);

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