Axios와 Fetch는 문법도 비슷하고 하는 역할도 동일한데, 토이프로젝트에서 API를 연동하기에 앞서 둘의 차이를 명확히 구분하고 싶어 정리한다.
📖Axios AND Fetch
- 클라이언트와 서버 간의 데이터를 주고받기 위해 비동기 HTTP 통신을 하기 위한 문법임
- 사용법과 기능은 비슷하지만 각각의 장단점이 있음
📝Axios
axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 외부 라이브러리이다.
비동기로 HTTP 통신을 할 수 있고, return을 promise 객체로 해주기 때문에 reponse 데이터를 다루기 쉽다.
👉🏻 Promise API 참고문서 :: https://ko.javascript.info/promise-api
💎장점
- 비교적 다양한 기능들이 존재한다.
→ JSON자동변환 / 자동문자열 변환 / CSRF 보호 기능 등 fetch에는 없는 기능들 - Promise API를 활용하기 때문에 다루기 편리하다.
- 브라우저 호환성이 뛰어나다.
💣단점
- 별도의 라이브러리 설치가 필요하다.
→npm install axios - 외부 라이브러리이므로 업데이트에 따라 불안정적일 수 있다.
✏️문법구성
1. axios 설치하기
npm install axios
2. axios 문법구성
/* app.js :: axios를 사용할 파일*/
import axios from "axios";
const getData = async (e) => {
const { data } = await axios({
method: "get,
url: "API통신을 위한 url",
}).then((response) => console.log(response));
};📝Fetch
ES6 업데이트부터 들어온 Promise 기반 JavaScript 내장 라이브러리이다.
내장 라이브러리라는 점이 가장 큰 장점이다.
💎장점
- 자바스크립트 내장 라이브러리이므로 별도의 설치가 필요없다.
- Promise API를 활용하기 때문에 다루기 편리하다.
- 내장 라이브러리이기 때문에 업데이트에 따른 오류 예방이 가능하다.
💣단점
- 지원되지 않는 브라우저가 존재한다. (IE11)
- 네트워크 에러 발생 시 reponse timeout이 없어 하염없이 기다려야 한다.
- JSON변환, 문자열변환 과정이 별도로 필요하다.
- axios에 비해 비교적 기능이 부족하다.
✏️문법구성
1. fetch 문법구성 (별도 설치 필요없음)
/* app.js :: axios를 사용할 파일*/
const getData = async (e) => {
const { data } = await fetch("API통신을 위한 url", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
//JSON변환
body: JSON.stringify({
id: "id",
description: "description",
}),
}).then((response) => console.log(response));👉🏻 axios와 달리 JSON을 변환해주는 과정이 필요하다.
📚정리
Axios
웹 브라우저 호환성이 높고 보완성이 우수하고,
JSON변환, 문자열 변환이 귀찮고(자동으로 해줌),
Request TimeOut설정 등 많은 기능을 사용하기를 원한다면 Axios 사용 추천
Fetch
별도의 라이브러리 설치가 번거롭고,
업데이트에 따른 오류에 빠르게 대응하기를 원한다면 Fetch 사용 추천
keynene