JavaScript Promise.all - 如何检查解决状态？

Question

假设我有一系列的promises,每个元素都会对一个视图的图像(png)进行AJAX调用.

const images = Promise.all(views.map(view => {
   return fetch(`/sites/${siteId}/views/${view.id}/image/`);
}));

有没有可能使用Promise.all检查承诺解析的当前状态？如果没有,还有其他方法吗？

例如,如果下载了10/20个图像,我想给用户一个反馈,我们已经为他下载了50%的图像.

Answer 1

只要promise解决,只需递增一个变量:

const promises = views.map(view => fetch (`/sites/${siteId}/views/${view.id}/image/`));
const images = Promise.all(promises);

let progress = 0;
promises.forEach(p => p.then(() => progress++));

setInterval(() => {
  console.log(progress / promises.length * 100 + "%");
}, 1000);

Answer 2

无需使用setInterval. 更新的时候只更新进度。

const promises = views.map(view => fetch (`/sites/${siteId}/views/${view.id}/image/`));
const images = Promise.all(promises);

let progress = 0;
promises.forEach(p => p.then(() => {
  progress++;
  console.log(progress / promises.length * 100 + "%");
}));