При ожидании ответа от сервера AXIOS заменять элемент анимацией загрузки во Vue.js?

Question

[ниндзя оп оп]

У меня есть элемент ( кнопка ), при клике на который через аттрибут @click обращается к методу "sendRequest" , который в свою очередь отсылает через библиотеку axios запрос на сервер, так вот, как при любом обращении через библиотеку axios к серверу, пока ответ от сервера еще в обработке, вставлять вместо элемента (в данном случае кнопки) - анимацию загрузки (гиф картинку с loader'ом)?

Answer 1

[Alex]

Я знаю два способа:

1. Простой:
   
   1. Создаёте переменную loading.
      
   2. Перед отправкой запроса выставляете значение loading = true.
      
   3. После отправки в секции finally выставляете значение loading = false.
      
   4. В самом шаблоне смотрите на этот переключатели и отображаете загрузку
      
   
   
   
2. Сложный, но более надёжный
   
   1. Используете xstate для управления состояниями вашего компонента.
      
   2. В самом шаблоне смотрите на текущее состояние и отображаете загрузку
      
   
   

UPD
Очень советую этот доклад по теме

Comments

[ниндзя оп оп]

а как можно сделать так, чтобы именно конкретный элемент ( в данном случае кнопка ) по которому был осуществлен клик, через который вызвался метод, который отправил запрос через axios, был заменен анимацией загрузки, и после завершения запроса, кнопка обратно показалсь, а анимация загрузки исчезла? или это уже не реально?

[Alex]

Enigman Ninja, Это же именно то о чем вы спросили и про что я ответил.

[ниндзя оп оп]

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

[ниндзя оп оп]

короче, решил использовать nprogress

[SimBioT19]

Enigman Ninja, рекомендую https://github.com/posva/vue-promised