프로젝트를 하며 fetch만 써오던 날이 계속 이어져 왔는데, 어느 순간부터는 axios를 기본으로 사용하고 있다. fetch에 비해 axios가 더 좋다 라는 막연한 생각으로 써왔기 때문에 도대체 뭐가 더 좋은지 알아보기 위해서 정리하고자 한다.
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의 장단점
장점
단점
Axios는 마찬가지로 Promise기반으로 만들어진 HTTP 통신 라이브러리이다. return을 promise 객체로 하기 때문에 response 데이터도 쉽게 다룰 수 있다.
axios.post(`api주소`, {
email: id,
password: password,
})
.then(res => console.log(res.data));
axios가 더 간단해보이지만 fetch도 axios와 비슷하게 쓸 수 있다.
Axios의 장단점
장점
단점