在承诺期间检查进度

Question

我有一个关于 javascript 的 promise api 的非常基本的问题。我有一个承诺电话，可能需要一段时间才能完成。在处理过程中，我想通过一些百分比加载信息来报告 UI 中的进度。 then() 方法只是指向 promise api 返回的时间。但是如何在处理过程中报告进度？

我尝试查看其他一些 stackoverflow 答案，但大多数情况下它们处理多个承诺，并使用 setTimeOut() api。我只有一个promise api，不知道可能需要多少时间（取决于我拨打电话时数据库中的数据）。由于我不知道可能需要多少时间，所以我也不确定如何显示百分比信息。有什么建议么？

我正在使用基本的 javascript，并在代码中剔除 observables，并且不能使用 react 或 angular（无权访问它）。

Answer 1

如果您不知道需要加载多少字节以及已经加载了多少字节，则无法显示任何正在进行的内容。最简单的方法是展示一些加载器等等。或者你只需​​要将你的主要承诺拆分成一个简单的和小的承诺。

Answer 2

我有一个关于 javascript 的 promise api 的非常基本的问题。

有一个非常基本的答案； promise api 不支持“开箱即用”的进度。

不知道可能需要多长时间（取决于我拨打电话时数据库中的数据）。

没有这些信息，就不可能提供任何有意义的进展。您需要做的第一件事是快速调用数据库询问“需要如何加载 mch 数据”。然后，您应该以块的形式加载数据，并提供一种在累积数据时将加载的“Y 的块 X”传送回 UI 的方法。简而言之，这是“流式传输”数据的基本手段。

这就是为什么，在你看到它完成的地方，他们使用多个承诺来完成，每个“进度承诺”都会在进度更新时解决，从而允许 UI 更新进度条。

// fake promise to represent action which should take no more than 90s
var promise = new Promise((resolve) => {
    setTimeout(resolve,20000);
});

// reference to progressbar
var progressBar = document.querySelector('.progress');
var current = 0;

// repeating timer which updates every 5 secs
var updater = setInterval(() => {
   if(current >= 100)
       clearInterval(updater);
   // update by 5/90ths
   var updateAmount = (5/90) * 100;
   current += updateAmount;
   progressBar.style.width = current + "%";
},5000);

// when the long action resolves, set the progress bar to 100 and stop the repeating event
promise.then(() => {
   clearInterval(updater)
   progressBar.style.width = "100%";
   console.log("finished");
});

.progress-bar{
  width:100%;
  height:50px;
}

.progress{
   width:0%;
   height:100%;
   background-color:blue
}

<div class="progress-bar">
  <div class="progress"></div>
</div>