axios

fetch의 문제점

먼저 브라우저에서 제공하는 fetch api를 사용을 했을 때 몇가지 문제점이 있다.

1.첫번째로는 데이터를 받아 올 때마다 json()를 통해 데이터를 자바스크립트 객체로 변환을 해 줘야 한다.

2.두번째로는 fetch를 사용할 때 에러가 발생하면 catch를 통해 잡을 수 있지만, catch에 잡히지 않는 에러들이 있는데 이 에러들은 then으로 들어와서 then안에서 thorw new Error를 통해 다시 한번 에러 처리를 해줘야 하는 번거로움이 있다.

이것을 해결해 줄 수 있는 것이 axios 라이브러리이다.

axios 사용법

먼저 axios를 설치해 준다.

npm install axios

axios를 사용하고자 하는 곳에 가서 import 해준다.

import axios form 'axios'

get,post,put,delete중 뭘 하고 싶은지를 axios다음에 입력해 주면 된다.

데이터를 성공적으로 불러 온다면 데이터가 response로 전달이 되고, fetch와 달리 json으로 변환해줄 필요 없이 바로 데이터 값을 사용할 수 있다.

데이터를 불러오는 것을 실해 한다면 catch를 통해 error를 잡을 수 있다.
axios를 사용하면 서버에서 보내주는 200번대 응답은 then으로 들어오고 400번대와 같은 에러 들은 catch로 들어 온다.

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });