如何在 JavaScript 中显示 Promise 的进度

内容

概述
执行
结论

概述

显示多个任务完成的进度对用户很有帮助，因为它可以指示他们可能需要等待多长时间才能完成剩余的任务。

我们可以通过在每个承诺解决后增加一个计数器来实现这一点。

本教程的视频版本可以在这里找到...

由于任务正在进行中，我们期望的输出看起来会像这样。

Loading 7 out of 100 tasks

执行

让我们从标记开始吧！

您所需要的只是一个指向 JavaScript 文件的脚本标签（将在下面实现）和一个 div 元素，其文本将被操作以更新已完成任务的进度计数器。

<!DOCTYPE html>
<html>
<body>
    <div id="progress"></div>    
    <script src="app.js"></script>
</body>
</html>

接下来是 JavaScript！

我们将首先创建一个函数，该函数在随机时间过去后解决承诺。

我们这样做是因为它非常类似于它在实际应用程序中的工作方式，例如在不同时间解析的 HTTP 请求。

async function task() {
  return new Promise(res => {
    setTimeout(res, Math.random() * 5000);
  })
}

其次，我们将创建一个包含 100 个承诺的数组，并更新进度文本，以便在所有任务完成时通知用户。

const loadingBar = document.getElementById('loadingBar');

(async() => {
  const promises = new Array(100)
    .fill(0)
    .map(task);

  loadingBar.textContent = `Loading...`;
  await Promise.all(promises);
  loadingBar.textContent = `Loading Finished`;
})();

现在想象一下，如果这个过程需要 30 秒才能完成。在加载过程中，用户在屏幕上看到的只是“正在加载...”的文字。

这不是一个非常有用的信息！

现在让我们通过在每个任务解决后更新进度文本来改进这一点。

下面的代码片段是完整的实现。

const loadingBar = document.getElementById('loadingBar');

async function task() {
  return new Promise(res => {
    setTimeout(res, Math.random() * 5000);
  })
}

function loadingBarStatus(current, max) {
  loadingBar.textContent = `Loading ${current} of ${max}`;
}

(async() => {
  let current = 1;
  const promises = new Array(100)
    .fill(0)
    .map(() => task().then(() => loadingBarStatus(current++, 100)));

  await Promise.all(promises);
  loadingBar.textContent = `Loading Finished`;
})();

现在，您可以看到，随着每个承诺的解决，计数器会增加并显示给用户。

结论

简而言之，您需要做的就是在每个承诺得到解决时更新进度。

我希望您发现这个简短的教程很有帮助。

请在下面的评论中告诉我你的想法。😊

文章来源：https://dev.to/jrdev_/how-to-display-the-progress-of-promises-in-javascript-lh0