원활한 웹 애플리케이션을 위해 API 요청 중에 로딩 상태를 보여주는 것은 중요합니다. 이를 위해 Axios 라이브러리를 사용하여 간단하게 로딩 상태를 표시하는 방법을 알아보겠습니다.

Axios란?

Axios는 브라우저와 Node.js를 위한 HTTP 클라이언트 라이브러리로, 비동기로 HTTP 요청을 보내고 응답을 처리하는데 사용됩니다. 쉬운 사용법과 많은 기능을 제공하여 많은 개발자들이 선호하는 라이브러리입니다.

로딩 상태 표시하기

이제 Axios를 사용하여 API 요청 중에 로딩 상태를 표시하는 방법을 알아보겠습니다.

먼저, HTML 파일에 로딩 상태를 표시하기 위한 요소를 추가합니다. 예를 들어, 다음과 같이 <div id="loading"></div>를 추가합니다.

<div id="loading"></div>

다음으로, Axios를 사용하여 API 요청을 보내기 전에 로딩 상태를 보여주는 함수를 작성해야 합니다.

const loadingElement = document.getElementById("loading");

function showLoading() {
  loadingElement.style.display = "block";
}

function hideLoading() {
  loadingElement.style.display = "none";
}

showLoading 함수는 API 요청을 보내기 전에 호출되어 로딩 상태를 보여주고, hideLoading 함수는 API 요청이 완료된 후에 호출되어 로딩 상태를 숨깁니다.

이제 Axios를 사용하여 API 요청을 보낼 때, 로딩 상태를 표시하기 위해 showLoading 함수와 hideLoading 함수를 호출해야 합니다.

axios.get("/api/data")
  .then(function(response) {
    // API 요청이 성공적으로 완료된 후 로직을 작성합니다.
  })
  .catch(function(error) {
    // API 요청이 실패한 경우 로직을 작성합니다.
  })
  .finally(function() {
    // API 요청 완료 후 로딩 상태를 숨깁니다.
    hideLoading();
  });

위의 예제에서는 axios.get 함수를 사용하여 GET 요청을 보내고 있지만, 실제 요청 방법에 따라 해당하는 Axios 메서드를 사용하면 됩니다.

마무리

Axios를 사용하여 API 요청 중에 로딩 상태를 표시하는 방법에 대해 알아보았습니다. 이를 통해 사용자에게 응답을 기다리는 동안 로딩 상태를 시각적으로 보여줄 수 있습니다. Axios의 다양한 기능을 활용하여 더욱 효율적인 웹 애플리케이션을 개발할 수 있습니다.

더 자세한 내용은 Axios 공식 문서를 확인하시기 바랍니다.