[JS] Axios VS Fetch / Axios와 Fetch 중 뭐를 사용해야할까

개요

API를 연동하기 위한 문법으로 Axios/ Fetch를 사용해셨을겁니다 !

둘의 문법은 거의 차이가 없어서 무슨 차이가 있는지 헷갈렸어요 ㅠ

저도 API를 연동하던 와중 둘의 차이를 구분하고 싶어서 찾아봤고, 정리하기 위해 글을 남깁니다!

 

 

 

 

 

1.Axios란? 

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

주로 API 연동/백엔드랑 프론트엔드 사이의 통신에서 사용됨

 

2. Axios 문법

1) axios 설치하기

npm install axios

2) axios 문법 구성

 

//App.js

import axios from "axios";


/*API 연동하기, API별로 사용법이 바뀔 수 있음*/
 const getData = async (e) => {
   const { data } = await axios({
   //🌟🌟아래 옵션은 상황별로 작성
     method: "get,
     url: "url.com",
   }).then((response) => console.log(response));
};

🌟인자로 쓰이는 옵션들에 대해 간단히 알아보자🌟

 

-method: 데이터를 가져올지, 보낼지에 따라 get/post등으로 쓰일 수 있음

-URL: 통신할 웹 서버

-headers: 헤더

-responseType: 응답데이터의 타입

 

 

3. fetch란?

ES6부터 생긴 JS 내장 라이브러리로 별도의 설치가 없다~

Axios와 마찬가지로 promise 기반이라 크게 사용법이 다르지 않다!

 

fetch 문법

 const getData = async (e) => {
    const { data } = await fetch("url.com", {
    //아래 옵션은 상황별로 작성
    method: "POST",
    headers: {
    "Content-Type": "application/json",
  }, //JSON으로 변환해주는 과정 필요.
    body: JSON.stringify({
    id: "1234",
    description: "안녕 나는 하연이야~~",
  }),
}).then((response) => console.log(response));

axios와 문법적으로 큰 차이는 없지만, string으로 변환하는 과정이 필요하다

 

 

 

Axios VS Fetch

Axios	Fetch
라이브러리 설치 o	라이브러리 설치 x
자동 JSON 변환	JSON 변환 필요
속도가 상대적으로 느림	속도가 상대적으로 빠름
자동 문자열 변환	POST 요청 시 "JSON.stringfy()"를 사용하여 객체를 문자열 변환
상태코드가 범위를 넘어가면 거부	HTTP 에러 응답 시, promise 거부 x, 네트워크 장애시만 거부
CSRF 보호 기능으로 상대적으로 보안에 유리	X
다양한 브라우저에서 사용 가능	지원이 되지 않는 브라우저가 있음
Request 취소/ Request TimeOut 설정 가능	X, AbortController를 이용해야함

 

결론

별도의 라이브러리 설치가 귀찮다면 fetch를 사용하는 것이 좋다!
특히 react-native에선 fetch를 사용하는 것을 추천!

하지만 웹 브라우저 호환성이 높고 보완성이 높은 axios
보안성, 장기성, 큰 프로젝트, 많은 옵션을 사용하기 위해선
axios를 사용하는 것을 추천한다!