[JS] Axios 오류 처리

Axios를 사용한 API 요청에서 발생할 수 있는 다양한 오류를 처리하는 방법은 매우 중요합니다. 서버나 네트워크 문제로 인해 API 요청이 실패할 수 있으며, 이러한 오류를 적절히 처리하면 사용자 경험을 개선하고 문제를 디버깅하는 데 도움이 됩니다. 이번 글에서는 Axios의 오류 처리 방식과 일반적인 방법을 소개하겠습니다.

 

 

Axios 오류 처리 - 커버 이미지

 

Axios의 오류 처리

목차

1. 기본 오류 처리

2. 오류 객체

3. HTTP 상태 코드에 따른 오류 처리

4. 타임아웃 처리

마무리

추천글

 

기본 오류 처리

Axios는 Promise 기반이기 때문에, 오류는 주로 .catch() 블록에서 처리됩니다. 요청이 실패하면 .catch() 블록이 실행되어 오류에 대한 정보를 처리할 수 있습니다.

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    console.log('성공:', response.data);
  })
  .catch(error => {
    console.log('요청이 실패했습니다.');
    console.error('에러:', error);
  });

 

위 코드에서 유효하지 않은 URL로 GET 요청을 보내기 때문에 .catch() 블록이 실행되고, 오류 메시지가 콘솔에 출력됩니다.

 

오류 객체

Axios에서 발생하는 오류는 다양한 정보가 포함된 객체로 반환됩니다. 이 객체에는 요청이 실패한 이유에 대한 자세한 정보가 포함되어 있습니다.

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log('Error Message:', error.message);           // 오류 메시지
    console.log('Error Response:', error.response);         // 서버의 응답 데이터
    console.log('Error Request:', error.request);           // 요청 객체
    console.log('Error Config:', error.config);             // 요청에 사용된 설정
  });

 

• error.message: 오류에 대한 메시지(네트워크 문제 등)를 나타냅니다.
• error.response: 서버로부터 받은 응답이 포함됩니다. 상태 코드, 데이터 등이 여기에 포함됩니다.
• error.request: 요청이 서버로 전송되었으나 응답을 받지 못한 경우, 요청 관련 정보가 여기에 포함됩니다.
• error.config: Axios 요청에 사용된 설정 정보가 포함됩니다.

 

HTTP 상태 코드에 따른 오류 처리

Axios는 응답의 HTTP 상태 코드에 따라 오류를 구분할 수 있습니다. 예를 들어, 404(Not Found), 500(Internal Server Error) 등 다양한 상태 코드를 기준으로 오류를 처리할 수 있습니다.

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 서버에서 응답을 받았으나 오류 상태 코드가 발생한 경우
      console.error(`${error.response.status}: ${error.response.data}`);
    } else if (error.request) {
      // 요청이 전송되었으나 응답을 받지 못한 경우
      console.error('No response received:', error.request);
    } else {
      // 요청 설정 중 오류가 발생한 경우
      console.error('Error setting up request:', error.message);
    }
  });

 

타임아웃 처리

네트워크 지연이나 서버 응답 시간이 길어질 때, 요청의 타임아웃을 설정하여 일정 시간이 지나면 요청을 중단하고 오류를 처리할 수 있습니다.

axios.get('https://jsonplaceholder.typicode.com/posts', { 
    timeout: 2000 
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('Request timeout:', error.message);
    }
  });

 

위 코드는 타임아웃을 2초로 설정한 예시입니다. 서버가 2초 내에 응답하지 않으면 타임아웃 오류가 발생합니다

 

 

 

 

Axios는 다양한 방식으로 오류를 처리할 수 있도록 강력한 기능을 제공합니다. 오류 처리 시 중요한 점은 응답의 상태 코드와 네트워크 관련 문제를 적절하게 구분하고, 사용자 경험을 개선할 수 있도록 적절한 오류 메시지를 출력하는 것입니다. 이러한 오류 처리 방법을 사용하면 네트워크 통신에서 발생할 수 있는 다양한 상황에 잘 대처할 수 있습니다.

 

 

추천글

2024.09.24 - [개발 공부 일지/JavaScript] - [JS] Javascript에서 Axios 사용하기

[JS] Javascript에서 Axios 사용하기

2024.09.23 - [개발 공부 일지/JavaScript] - [JS] fetch 함수 - API 호출하기 (GET, POST)

[JS] fetch 함수 - API 호출하기 (GET, POST)