在承诺期间检查进度 [英] checking progress during promise

问题描述

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

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

我使用的是基本的 javascript，并在代码中淘汰了 observable，不能使用 react 或 angular(无法访问它).

解决方案

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

有一个非常基本的答案；承诺 api 不支持开箱即用"的进度.

<块引用>

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

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

这就是为什么，在你看到这个完成的地方，他们用多个承诺来做，每个进度承诺"在进度更新时解决，允许 UI 更新进度条.

//表示不超过 90 秒的动作的假承诺var promise = new Promise((resolve) => {设置超时(解决，20000)；});//引用进度条var progressBar = document.querySelector('.progress');无功电流 = 0;//重复计时器，每 5 秒更新一次var updater = setInterval(() => {如果(当前 >= 100)clearInterval(更新程序)；//5/90 更新var updateAmount = (5/90) * 100;当前 += updateAmount;progressBar.style.width = 当前 + "%";},5000);//当长动作解决时，将进度条设置为 100 并停止重复事件promise.then(() => {clearInterval(更新程序)progressBar.style.width = "100%";console.log("完成");});

.progress-bar{宽度:100%；高度:50px；}.进步{宽度:0%；高度:100%；背景颜色:蓝色}

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

I have a very basic question on promise api of javascript. I have one promise call, which may take a while to finish. While it is processing, I want to report progress in the UI - through some percent loading information. then() method just points to the time when the promise api has returned. But how to report progress while it is processing?

I tried looking at some other stackoverflow answers, but mostly they deal with multiple promises, and use setTimeOut() apis. I just have one promise api, and don't know how much time it might take (depends on the data in the database at the time I make the call). Since I do not know the time it might take, I am not sure how to show the percent info as well. Any suggestions?

I am using basic javascript, and knockout observables in the code, and cannot use react or angular (don't have access to it).

解决方案

I have a very basic question on promise api of javascript.

There's a very basic answer; the promise api does not support progress "out of the box".

don't know how much time it might take (depends on the data in the database at the time I make the call).

Without this information, it is impossible to provide any meaningful progress. The first thing you'll need to do is make a quick call to the database to ask "How mch data needs to be loaded". Then, you should load the data in chunks, and provide a means to communicate "chunk X of Y" loaded back to the UI as you are accumulating data. Put simply, this is a basic means of "streaming" data.

And this is why, where you see this done they do it with multiple promises, where each "progress promise" resolves when there is an update to the progress, allowing the UI to update a progress bar.

// 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>

这篇关于在承诺期间检查进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！