Блог

Как мы можем запустить счетчик, пока Axios запрашивает API?

Я добавил счетчик начальной загрузки в свой HTML и в js-файл, я установил для него значение none property .

 <div id="spinner" class="spinner-grow text-info" role="status">
    <span class="sr-only">Loading...</span>
</div>
  

Как я могу установить block , пока он запрашивает API, после завершения запроса снова установите его свойство на none

 document.getElementById('spinner').style.display = 'none';
axios.post(`/getData/users/pagewise`,data)
            .then(response => {
                console.log(response);
                const $recievedHTML = $(response.data);
                $("#View").replaceWith($recievedHTML);

            })
            .catch(error => {
               console.log(error);
               console.log(error.response.data);
           });
  

Вы делаете именно это: устанавливаете block перед выполнением вызова и none после завершения вызова (возможно, с использованием finally обработчика):

 document.getElementById('spinner').style.display = 'block';
axios.post(`/getData/users/pagewise`,data)
    .then(response => {
       console.log(response);
       const $recievedHTML = $(response.data);
       $("#View").replaceWith($recievedHTML);

    })
    .catch(error => {
        console.log(error);
        console.log(error.response.data);
    })
    .finally(() => {
        document.getElementById('spinner').style.display = 'none';
    });
  

Вы могли бы рассмотреть возможность использования класса вместо прямого управления стилем.

Перед отправкой запроса axios.post сделайте его display: block , а когда обещание будет выполнено, сделайте его display: none снова.