vue.js如何在处理数据时显示进度

Question

我在 vue.js 中构建了一个页面，其中调用了一个 API（使用 axios）获取一个大型 json 对象（1k+）。

在处理这个对象时，我想向用户展示操作的进度 - 没有什么比进度条更花哨的了，只是一个简单的“从 Y 处理 X”。

我找到了如何在纯 JS 的 jquery 中执行此操作的示例，但我可以让它在 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 条记录”。即使您在循环中插入this.$forceUpdate() 以在每次迭代时更新界面，更改仍然太快，任何用户都无法看到。

真正的问题是“处理”所有项目只需要几毫秒。所以它总是发生得太快而无法显示中间结果。

如果您试图显示 AJAX 请求/响应的进度，这是一个完全不同的问题，需要客户端和服务器之间的协调。搜索 HTTP 分块响应作为开始。