AxiosError를 핸들링하는 3가지 방법

1. try-catch문을 이용한 핸들링

try-catch문을 이용하면 비동기 함수에서 발생한 예외를 쉽게 처리할 수 있습니다. Axios에서는 요청을 보내는 함수가 비동기 함수이므로, try-catch문을 이용하면 AxiosError를 쉽게 핸들링할 수 있습니다. 따라서, AxiosError를 핸들링하기 위해 try-catch문을 사용하는 것이 가장 직관적이고 간단한 방법입니다.

try {
  await axios.get('/api/some-data');
} catch (error) {
  if (axios.isAxiosError(error)) {
    console.log(error.response?.data);
  } else {
    console.log(error.message);
  }
}

 

2.catch() 메소드를 이용한 핸들링

.catch() 메소드를 이용하면 비동기 함수에서 발생한 예외를 처리할 수 있습니다. Axios에서는 요청을 보내는 함수가 비동기 함수이므로, .catch() 메소드를 이용하면 AxiosError를 쉽게 핸들링할 수 있습니다.

axios.get('/api/some-data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (axios.isAxiosError(error)) {
      console.log(error.response?.data);
    } else {
      console.log(error.message);
    }
  });

 

3. Interceptor를 이용한 핸들링

Interceptor를 이용하면 요청과 응답을 가로채서 수정할 수 있습니다. Axios에서는 Interceptor를 이용하여 요청과 응답을 가로챌 수 있으므로, Interceptor를 이용하면 AxiosError를 쉽게 핸들링할 수 있습니다.

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (axios.isAxiosError(error)) {
      console.log(error.response?.data);
    } else {
      console.log(error.message);
    }
    return Promise.reject(error);
  }
);

 

이외에도 여러 가지 방법이 있지만, 이 세 가지 방법이 가장 많이 사용되는 방법입니다.

AxiosError를 핸들링하는 방법은 여러 가지가 있지만, 이 세 가지 방법을 사용하여 AxiosError를 핸들링할 수 있습니다. 이 방법들을 사용하면 AxiosError를 쉽게 핸들링할 수 있으며, 코드의 가독성도 좋아집니다. 따라서, AxiosError를 핸들링하기 위해서는 이 세 가지 방법을 잘 이해하고 익혀두는 것이 좋습니다.