JavaScript Fetch, Axios 차이

HTTP Request를 위한 방법 중 Fetch, Axios에 대해 알아보자.

 

 

Fetch

fetch("https://localhost:3000/user", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "hj1",
    name: "hjkang",
  }),
}).then((response) => console.log(response));

 

장점

• 내장 라이브러리이므로 별도로 import 할 필요가 없다.
• 내장 라이브러리이므로 업데이트에 따른 에러 방지가 가능하다.
• Promise를 기반으로 만들어져서 다루기 쉽다.

 

단점

• 지원하지 않는 브라우저가 존재한다.(ex. IE11)
• 네트워크 에러 발생 시 response timeout이 없어서 기다려야 한다.
• JSON으로 변환하는 과정이 필요하다.
• Axios에 비해 기능이 부족하다.

 

 

 

Axios

axios({
  method: 'post',
  url: 'https://localhost:3000/user',
  data: {
    id: 'hj1',
    name: 'hjkang'
  }
}).then((response) => console.log(response));

 

장점

• response timeout 처리 방법이 존재한다.
• 크로스 브라우징 최적화로 브라우저 호환성이 뛰어난다.
• Promise를 기반으로 만들어져서 다루기 쉽다.

 

단점

• 모듈 설치가 필요하다.

 

 

---

참고

- https://tlsdnjs12.tistory.com/26