Задать вопрос

Как запускать какую-либо функцию пока получаются данные от сервера?

В vue-компоненте происходит получение данных раз в минуту, после чего они обновляются в самом компоненте. Я хочу сделать крутящийся spinner на блоке, когда данные обновляются, затем при выводе новых данных, скрывать его.

То есть идея такая:

1. происходит первый рендер компонента с данными
2. через setInterval(func,60000); выполняется метод:
requestData: function (currency) {
            // console.log(currency);
            axios
              .get('/api/capitalization/' + currency)
              .then(response => {
                // Пишем parse, потому что из базы берется сразу JSON с слешами "\"
                this.info = JSON.parse(response.data);
                console.log(this.info);
              });
          }


Не понимаю как можно перед выполнением поставить анимацию обновления блока, а после того как данные получены, этот блок убирать?

Или все это просто и достаточно правильно использовать "флаги"?
  • Вопрос задан
  • 125 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 4
Флаг isLoading пусть принимает значения либо false либо true (когда идёт загрузка).

Показывать/скрывать спиннер через v-if="isLoading"
Ответ написан
Комментировать
0xD34F
@0xD34F Куратор тега Vue.js
хочу сделать крутящийся spinner на блоке, когда данные обновляются, затем при выводе новых данных, скрывать его

Добавляете свойство showSpinner. Перед запросом делаете:

this.showSpinner = true

После получения ответа:

this.showSpinner = false

В шаблоне, соответственно:

<div class="spinner" v-if="showSpinner"></div>

Посмотреть живьём.
Ответ написан
Комментировать
Sanasol
@Sanasol
нельзя просто так взять и загуглить ошибку
запуститьАнимацию();
axios
              .get('/api/capitalization/' + currency)
              .then(response => {
                // Пишем parse, потому что из базы берется сразу JSON с слешами "\"
                this.info = JSON.parse(response.data);
                console.log(this.info);
                остановитьАнимацию();
              });


ну и желательно добавить catch() в котором анимацию тоже убирается в случае если сервер ответил ошибкой.
Ответ написан
Комментировать
@mShpakov
Дополню ответ Александр Аксентьев
Желательно сделать обработку ошибок (добавить кэтч)
А остановку спиннера вынести в finally
запуститьАнимацию();
axios
              .get('/api/capitalization/' + currency)
              .then(response => {
                // Пишем parse, потому что из базы берется сразу JSON с слешами "\"
                this.info = JSON.parse(response.data);
                console.log(this.info);
              })
.catch(err => {console.log(err)})
.finally(resp => {
остановитьАнимацию();
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы