Axios는 자바스크립트에서 많이 사용되는 HTTP 클라이언트 라이브러리입니다. 이 라이브러리를 이용하면 쉽게 API 요청을 보낼 수 있습니다. 그런데 때로는 API 요청 중 에러가 발생할 수 있습니다. 이번 포스트에서는 Axios를 이용하여 API 요청 중 에러 메시지를 표시하는 방법에 대해 알아보겠습니다.

Axios를 설치하기

Axios를 사용하기 위해서는 먼저 설치해야 합니다. Node.js 환경에서는 npm을 이용하여 설치할 수 있습니다.

npm install axios

브라우저 환경에서는 아래와 같이 CDN을 이용하여 스크립트를 추가할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

API 요청 중 에러 처리하기

Axios를 이용하여 API 요청을 보낼 때, .catch() 메서드를 이용하여 에러를 처리할 수 있습니다. 이 메서드는 Promise 체인의 마지막에 위치해야 합니다.

axios.get('/api/data')
  .then(function (response) {
    // 성공적으로 데이터를 받아왔을 때 실행되는 코드
    console.log(response.data);
  })
  .catch(function (error) {
    // 에러가 발생했을 때 실행되는 코드
    console.error(error);
    alert('API 요청 중 에러가 발생했습니다: ' + error.message);
  });

위의 예제에서는 .catch() 메서드를 이용하여 에러가 발생했을 때 콘솔에 에러를 출력하고, alert()를 이용하여 사용자에게 에러 메시지를 표시하고 있습니다.

애플리케이션에서 중요한 에러 메시지를 사용자에게 표시할 때에는 alert() 대신에 적절한 사용자 인터페이스 컴포넌트를 사용하는 것이 좋습니다.

참고 자료

• Axios 공식 문서