[vanillaJs] Fetch와 Axios를 비교해보자!

 

자바스크립트에는 HTTP Requests를 위한 방법으로 Fetch와 Axios있다.

두 가지를 모두 사용해보면서 장점과 단점을 느꼈었는데

정확히 어떤 점이 더 낫고 다른지 자세히 알아보자!

 

Fetch

ES6부터 들어온 JavaScript 내장 라이브러리다.
Promise 기반으로 만들어졌기 때문에 데이터를 다루기가 쉽다.

 

fetch("https://localhost:3000/dashboard/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "mingmeng030",
    title: "fetch and axios",
    description : "what's the difference between fetch and axios?",
  }),
}).then((response) => console.log(response));

 

Fetch 장점

- 자바스크립트의 내장 라이브러리이므로 별도로 import 할 필요가 없다.

- Promise 기반으로 만들어졌기 때문에 데이터를 다루기 편리하다.

- 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.

 

 Fetch 단점

- 지원하지 않는 브라우저들이 있다.

- 네트워크 에러 발생 시 response timeout이 없어 기다려야 한다.

- JSON으로 변환해주는 과정이 추가적으로 필요하다.

- 상대적으로 axios에 비해 기능이 부족하다.

 

 

Axios

axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리이다.
비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기가 쉽다.

 

axios({
  method: 'post',
  url: 'https://localhost:3000/dashboard/post',
  data: {
    id: "mingmeng030",
    title: "fetch and axios",
    description : "what's the difference between fetch and axios?",
  }
}).then((response) => console.log(response));

 

Axios 장점

- response timeout 기능을 제공한다.

- Promise 기반으로 만들어졌기 때문에 데이터 다루기가 편리하다.

- 폭 넓은 브라우저를 지원한다.

 

Axios 단점

- 사용을 위해 모듈 설치 필요하다. (npm install axios)

 

 

fetch와  axios의 차이 정리

Axios	Fetch
요청 객체에 url에 있다.	요청 객체에 url에 없다.
*써드파티 패키지로 설치가 쉽다. ( npm install axios )	Built-in APIs 로 별도의 설치 필요 없이,  모던 브라우저에서 사용 가합니다.
*XSRF를 보호 해준다.	별도 보호 없음.
data 속성을 사용한다.	body 속성을 사용한다.
data는 object를 포함한다.	body는 문자열화 되어있다.
status가 200, statusText가 'OK'이면 성공이다.	reponse 객체가 OK 속성을 포함하면 성공이다.
자동으로 JSON 데이터 형식으로 변환된다.	.json() 메소드를 사용하여 변환 해야한다.
Request 취소 와 Request Timeout 설정이 가능하다.	해당 기능 없음.
HTTP 요청을 가로챌 수 있다.	default로 제공하지 않음
폭 넓은 브라우저 지원	크롬 42+, firefox 39+, edge 14+, safari 10.1+ 에서만 지원

 third party  : 하드웨어 생산자와 소프트웨어 개발자의 관계를 나타낼 때 사용한다. 기본적으로 '제 3자' 를 뜻하는 단어로, '제 3자'가 어떤 분야의 제 3자를 의미하는지에 따라 의미가 나뉜다.

- 프로그래밍 개발과 개발자 사이에 플러그인, 라이브러리, 프레임워크 등을 서드파티로 볼 수 있다.

- 서비스와 사용자 사이에 서드파티는 응용 프로그램, 애플리케이션, 웹 서비스로 볼 수 있다. 

 

 XSRF  : 사이트 간 요청 위조(크로스 사이트 요청 위조, Cross-site request forgery, CSRF, XSRF)는 웹사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 하는 공격을 말한다.

 

참고
fetch and axios
https://tlsdnjs12.tistory.com/26
https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/
third parth
https://gyoogle.dev/blog/computer-science/software-engineering/3rd%20party.html
XSRF
https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%9A%94%EC%B2%AD_%EC%9C%84%EC%A1%B0