JS' 공부흔적

Axios에는 인터셉터라는 것이 존재한다. 이는 서버에 요청이 전달되기 전과 서버로부터 응답을 받을 때 가로채서 특정 동작을 수행하도록 하기 위해 존재한다. 인터셉터와 react-spinners 라이브러리를 사용하여 api 요청을 할 때 로딩 중인 상태를 알 수 있도록 로딩바를 구현해보자. 아래 나올 코드는 이전 글과 이어지는 코드이다. [Axios] Axios 인스턴스 생성하기 지금까지 axios를 사용할 때는 아래와 같이 사용했다. const url = "https://jsonplaceholder.typicode.com/"; const getInfo = () => { axios .get(url + "posts") .then((res) => { console.log(res); }) .catch((e) ..

지금까지 axios를 사용할 때는 아래와 같이 사용했다. const url = "https://jsonplaceholder.typicode.com/"; const getInfo = () => { axios .get(url + "posts") .then((res) => { console.log(res); }) .catch((e) => { console.error(e); }); }; 또다른 방법으로는 인스턴스를 생성하여 사용하는 방법이 있는데, 이를 사용하면 사용자 정의 구성을 사용할 수 있다. 또한, axios를 모듈화함으로써 재사용성을 높일 수 있다. 이때 재사용성을 높이기 위해 커스텀 훅을 만들어 사용하겠다. // useAxios.js export const useAxios = () => { const..

오늘의집 클론코딩을 진행하면서 Axios로 api 통신을 하면서 에러가 발생했을 때, 지금까지는 catch문 안에 console.log(e)로만 출력을 했었다. 그치만 에러가 발생하는 경우는 여러가지가 있다. 예를 들어, 상품에 대한 리뷰를 작성할 때는 상품을 구매하지 않았는데 리뷰를 작성하려 할 때, 또는 이미 리뷰를 작성한 상품에 대해 또 리뷰를 작성하려고 할 때 에러가 발생한다. 이렇게 상황에 따른 에러 메시지를 출력할 때는 아래와 같이 작성하면 된다. axios.post(~) .then(~) .catch((e) => { alert(e.response.data.message); //메시지를 지정해 준 경우 }