[axios] axios error handling

axiosInstance를 만든 경우 비동기 통신 성공, 실패(에러발생)시 공통적으로 처리해주는 로직을 interceptor에 작성할 수 있다.

아래는 response.error 쪽 코드이다.

spamAxios.interceptors.response.use(
  response => {
    // 생략
  },
  error => {
	console.log(error, error.response, 'interceptor error');
    if (error.status === 401) {
      const mail_url = localStorage.getItem('mail_url');
      if (mail_url) {
        window.location.href = mail_url;
        localStorage.clear();
      } else {
        window.location.href = '';
      }
    }
    return Promise.reject(error);
    // return error;
  },
);

 

이 부분에서 Promise.reject(error)와 그냥 error 객체를 리턴해주는 것의 차이를 알아볼 필요가 있다.

주요 차이점은 반환되는 값이 프로미스인지, 아닌지에 있다.

실제로, axiosInstance를 사용하는 api 요청에 대해 콘솔로 확인해보았다.

return Promise.reject(error)

Promise.reject(error)는 상태가 rejected인 프로미스를 반환하며, 즉, 비동기 작업에서 에러를 반환하고자 할 때 사용한다.
이 프로미스는 catch 메소드에 들어오게 되어 에러 발생 로직을 이 곳에서 처리할 수 있다.

block.actions.js:43 라인은 axiosInstace로 만든 api를 호출하는 부분의 .catch문에 해당한다.

참고로, axios에서 에러 객체는 다음과 같이 이루어져있다.

- error : error 객체 자체

- error.response : axios에서 만들어진 에러 데이터

- error.response.data : 서버에서 보낸 에러 데이터

return error

반면에 그냥 error 객체 자체를 반환하게 되어, catch 메소드를 사용하여 처리할 수 없다.

block.actions.js:30라인은 .then문에 해당한다.

그냥 error 객체를 리턴하면 .then으로 먼저들어오고, then에서 발생한 타입에러가 .catch로 들어간다.

이는 비동기 통신 에러 처리에 적절하지 않은 리턴값이다.

 

따라서, axios 인터셉터와 같이 비동기 작업에서 에러를 처리하는 경우에는 Promise.reject(error)를 사용하여 에러를 catch 블록에서 처리할 수 있다.