axios 와 fetch의 다른 점

fetch 보다 axios가 사용이 더 간편하다고 듣게 되었고 이번에 한 번 사용해보기로 하면서 다른 점을 찾아보았습니다.

​

fetch랑 axios랑 다른 점

​

내장함수 fetch와 모듈 axios

fetch는 내장되어 있는 기본 함수이기 때문에 따로 모듈을 설치할 필요가 없었다 .

하지만 axios는 모듈을 설치해서 사용하는 곳 마다 불러 와야 했다.

​

json으로 변환

fetch에서 get을 통하여 데이터를 가져오게 된다면 json 형식으로 데이터를 서버에서 보내기 때문에 가져온 데이터는 json을 풀어줘야 한다.하지만 axios를 통해 데이터를 가져오게 된다면 따로 json으로 묶여진 데이터를 변환해주지 않아도 된다.

왜냐하면 axios는 알아서 다 풍어주기 때문이다.

​

메소드를 쓰는 위치

fetch에서는 메소드를 따로 객체에 넣어서 정해 주었다면

axios는 원하는 메소드를 따로 객체에 넣어 넣어주지 않아도 된다. 간단하게 쓸 수 있다.

 

//fetch
fetch('http://server', {
   method : "GET",
   headers : {
       Contents-Type : "application/json"
    }
  })
.then(res => res.json()) //json으로 형식인 것을 풀어준다.
.then(data => {
 console.log("response DATA", data);
})

//axios.1
axios({
  method: 'get',
  url: 'http://server'
}).then(res => console.log("response Data", res.data))

//axios.2
axios.get('http://server').then(res => console.log("response DATA"res.data))