fetch와 axios

김철회·2022년 11월 7일
0

프로젝트를 하며 fetch만 써오던 날이 계속 이어져 왔는데, 어느 순간부터는 axios를 기본으로 사용하고 있다. fetch에 비해 axios가 더 좋다 라는 막연한 생각으로 써왔기 때문에 도대체 뭐가 더 좋은지 알아보기 위해서 정리하고자 한다.

fetch

fetch는 ES6부터 자바스크립트의 내장 라이브러리로 사용할 수 있게 되었다.
비동기 통신을 하는 promise를 기반으로 만들어졌으며, 내장 라이브러리이기 때문에 별도의 설치 없이 구현할 수 있고 ajax와 비교 했을 때 코드도 훨씬 간결하게 사용할 수 있다.

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
  	name:'king',
    age:300,
    school : 'of rock',
  })

  fetch(url,options)
  	.then(response => console.log(response))

fetch의 장단점
장점

  • 내장 라이브러리이다. 별도의 설치가 필요 없다.
  • promise 기반으로 이루어져 있기에 사용이 편하다.
  • 자체 내장 라이브러리이기 때문에 어떠한 프레임워크가 안정적이지 못하다면 fetch를 쓰는 것이 유리하다.

단점

  • iE의 경우에는 fetch를 지원하지 않는 경우가 왕왕 있다.
  • axios에 비해 기능이 부족하다.

Axios

Axios는 마찬가지로 Promise기반으로 만들어진 HTTP 통신 라이브러리이다. return을 promise 객체로 하기 때문에 response 데이터도 쉽게 다룰 수 있다.

 axios.post(`api주소`, {
        email: id,
        password: password,
      })
      .then(res => console.log(res.data));

axios가 더 간단해보이지만 fetch도 axios와 비슷하게 쓸 수 있다.

Axios의 장단점
장점

  • response timeout을 처리할 수 있다.(fetch는 불가능)
  • promise 기반으로 이루어져 있기에 사용이 편하다.
  • 크로스 브라우징에 대비 했기 때문에 브라우저 간의 호환성이 좋다.

단점

  • 별도의 라이브러리이기 때문에 필요시마다 설치하고 import해서 써야 한다.
profile
안녕하세요!

0개의 댓글