axios 와 비동기 통신 에러처리

then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다.

// 요청 인터셉터 추가
axios.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  });

// 응답 인터셉터 추가
axios.interceptors.response.use(
  function (response) {
    // 응답 데이터를 가공
    // ...
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    return Promise.reject(error);
  });

sentry 같이 에러가 발생했을 때 로그를 남기고 싶다면 instance의 interceptor를 이용하면 좋다
이때 주의해야 되는 것은 반드시 error처리 함수의 return은 Promise.reject 이어야 한다
Promise.reject없이 error를 바로 return하면 이 인스턴스를 사용하면 항상 resolve로 처리되어 에러처리를 할 수 없다

const SUB_URL = "/sub-url";
const getSomeData = (params) => {
     try {
      const res = axiosApi.get(SUB_URL, {
         params,
       });
      // 토스트 메세지
      // 성공 후 실행될 코드
    } catch (error) {
      // 토스트 메세지
      // 에러 시 실행될 코드
    } 
}

위와같이 사용하는 곳에서 에러처리를 하는 것이 좋다
보통 이런 것을 처리하는 곳은 react에선 hook에서 처리하는데 hook에서 처리해야 hook으로 된 토스트메세지 라이브러리같은 것을 사용할 수 있기 때문이다.

참고

• https://yamoo9.github.io/axios/guide/interceptors.html