[typescript] Axios 에러 핸들링 및 에러 처리 방법

22 Dec 2023

typescript

Axios는 많은 프로젝트에서 HTTP 클라이언트로 사용되며, 네트워크 요청 중에 발생한 에러를 어떻게 처리해야 하는지 알아보겠습니다.

1. Axios와 에러 핸들링

Axios를 사용하여 네트워크 요청을 보낼 때, 서버로부터 불안정한 응답이 올 수 있습니다. 이런 경우에 대비하여 Axios는 다양한 상태 코드와 에러를 핸들링할 수 있도록 지원하고 있습니다.

2. 네트워크 에러 처리

네트워크 에러는 서버로의 요청이 실패했거나 요청을 보내는 도중에 연결이 끊긴 경우에 발생합니다. 이때 Axios는 axios.isAxiosError를 통해 에러를 확인할 수 있습니다. 또한 error.response를 통해 서버로부터의 응답을 확인할 수 있습니다.

import axios, { AxiosError } from 'axios';

axios.get('https://example.com/api')
  .catch((error: AxiosError) => {
    if (axios.isAxiosError(error)) {
      if (error.response) {
        // 서버 요청 응답이 2XX이 아닌 경우
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else {
        // 서버와의 연결이 끊어진 경우
        console.log(error.message);
      }
      console.log(error.config);
    }
  });

3. 커스텀 에러 핸들링

Axios를 사용하는 애플리케이션에서 커스텀한 에러 핸들링을 구현하여 각종 에러 상황에 대응할 수 있습니다. 예를 들어, 네트워크 에러, 서버 응답 오류 등에 대한 처리를 커스텀하여 사용자 경험을 개선할 수 있습니다.

import axios, { AxiosError } from 'axios';

const instance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 1000,
});

instance.interceptors.response.use((response) => {
  return response;
}, (error) => {
  if (axios.isAxiosError(error) && error.response) {
    if (error.response.status === 401) {
      // 사용자에게 로그인을 요청
      // 예: history.push('/login');
    } else {
      // 그 외에 서버 응답 오류에 대한 처리 로직
    }
  } else {
    // 네트워크 에러 처리
  }
  return Promise.reject(error);
});

Axios를 사용하여 네트워크 요청을 보낼 때, 에러 핸들링과 커스텀 에러 처리를 위해 위와 같은 방법을 사용할 수 있습니다.

이상적으로는 모든 예상치 못한 에러 상황에 대비하여 신속하고 적절한 응답을 제공하는 것이 좋습니다.

참고 자료