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

Question

[Алексей Скляров]

В 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);
              });
          }

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

Или все это просто и достаточно правильно использовать "флаги"?

Answer 1

[Сергей Соколов]

Флаг isLoading пусть принимает значения либо false либо true (когда идёт загрузка).

Показывать/скрывать спиннер через v-if="isLoading"

Answer 2

[0xD34F]

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

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

this.showSpinner = true

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

this.showSpinner = false

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

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

Посмотреть живьём.

Answer 3

[Александр Аксентьев]

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

ну и желательно добавить catch() в котором анимацию тоже убирается в случае если сервер ответил ошибкой.

Answer 4

[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 => {
остановитьАнимацию();
});