作者：DreamFly72 | 来源：互联网 | 2023-09-12 16:42
我对Javascript的promise API有一个非常基本的问题。我有一个承诺电话，可能需要一段时间才能完成。在处理过程中，我想通过一些百分比加载信息报告UI的进度。 then（）方法仅指向promise api返回的时间。但是如何在处理过程中报告进度？
我尝试查看其他一些stackoverflow答案，但大多数情况下它们处理多个promise，并使用setTimeOut（）API。我只有一个Promise API，并且不知道它可能花费多少时间（取决于我打电话时的数据库中的数据）。由于我不知道可能要花费多少时间，因此我也不确定如何显示百分比信息。有什么建议么？
我使用的是基本的Javascript代码，并且在代码中使用了可观察到的可观察变量，并且无法使用react或angular（无法访问它）。
如果您不知道需要加载多少字节以及已经完成了多少字节，则无法显示任何正在进行的内容。最简单的方法是显示一些加载程序以及所有内容。或者，您只需要将主要承诺分解为简单的和小的承诺即可。
,
我对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
}
京公网安备 11010802041100号