Реализация индикатора выполнения для клиентского сервера

Question

У меня следующий случай, у меня есть клиент, реализованный в vue. js и базовый бэкэнд python с использованием flask framework.

У меня есть спокойный интерфейс, где от клиента мне нужно отправить запрос на сервер для начала определенных операций. Эта операция может занять много времени 4-5 минут, и я знаю, чтобы показать прогресс. Как это может быть реализовано между клиентом и сервером с использованием текущего технологического стека для интерфейса http REST.

Answer 1

Так как есть куча «загружаемых» компонентов для Vue (поскольку у Nuxt есть свои $loading), я просто буду использовать пример b-spinner из BootstrapVue и Axios в качестве HTTP-клиента :

<b-spinner ng-if="loadingProgress"> (показывает Spinner, если загрузка выполняется / отправка запроса до ответа сервера)

methods: {
    sendEmail() {
      //set loading progess as true
      this.loadingProgress = true;
      axios.post(
        '[your_API_URL]',
        {
          // data you wanted to POST as JSON
        },
      ).then((response) => {
        // reset your component inputs like textInput to null
        // or your custom route redirect with vue-router
      }).catch((error) => {
        if (error.response) {
          alert(error.response.data); // the error response
        }
      });
    }, 

Еще один пример моей формы контакта с использованием BSpinner + AJAX Ax ios POST on Formspree.io здесь

Другой компонент vue-wait (ссылка здесь )

Надеюсь, это то, что вы ищете.