vue.js как показать прогресс при обработке данных

Question

У меня есть страница сборки в vue.js, где вызывается API (с использованием axios) для получения большого объекта json (1k +).

Пока я обрабатываю этот объект, я хочу показать пользователю прогрессоперации - ничего необычного, как индикаторы выполнения, просто простой «Обработанный X из Y».

Я нашел пример того, как сделать это в jquery чистого JS, но я могу заставить это работать в vue.

Любая помощь приветствуется.

Вот мой скелетный код:

    <div>Processed {{processed.current}} of {{processed.total}} records</div>

    <script>
    data() {
        return {
          progress:{
            current:0,
            total: 0
          },
          records: [],
        };
      },
      mounted() {
        this.getRecords();
      },
      methods: {
        getRecords(){
          axios({
            method: "GET",
            url: process.env.VUE_APP_REPORTING_API + "/Reports/orders",
            headers: {
              "content-type": "application/json",
              Authorization: this.$cookie.get("wwa_token")
            }
          }).then(
                  result => {
                    this.progress.total = result.data.length;

                   //and here where the loop should happen, something like this
                   //obviously the below won't work :)
                   result.data.forEach(function(item) {
                        this.records.push(item);
                        this.progress.current++;
                      }
                  },
                  error => {
                  }
          );
        }
      }
    </script>

Answer 1

Ну, очевидная проблема с размещенным кодом состоит в том, что в нем есть синтаксическая ошибка (отсутствует закрывающая скобка), и он устанавливает новый контекст.Код (вроде бы) «работал», если его поменять на функции стрелок:

result.data.forEach(item => {
    this.records.push(item);
    this.progress.current++;
});

Однако я не думаю, что это будет делать то, что вы хотите.Код JavaScript будет обрабатывать все элементы до обновления пользовательского интерфейса, поэтому все, что увидит пользователь, будет «Обработано N из N записей».Даже если вы вставили this.$forceUpdate() в цикл, чтобы обновлять интерфейс на каждой итерации, изменения все равно будут слишком быстрыми для того, чтобы их мог увидеть любой пользователь.

Реальная проблема заключается в том, что «обрабатывает» все элементызанимает всего несколько миллисекунд.Так что всегда будет происходить слишком быстро, чтобы показать промежуточные результаты.

Если вы пытаетесь показать ход выполнения запроса / ответа AJAX, это совершенно другой вопрос, который потребует координации между клиентом и сервером.,Для начала выполните поиск фрагментированных HTTP-ответов.