ES6 Promise.all进度

Question

我有几个承诺，我需要解决，然后再进一步。

Promise.all(promises).then((results) => {
  // going further
}); 

有什么办法可以让我得到Promise.all承诺的进展吗？

从医生的角度来看，是不可能的。这个问题也不回答这个问题。

所以：

• 你不同意这会有用吗？我们不应该查询这个特性吗？
• 现在如何手动实现呢？

Answer 1

我已经建立了一个你可以重用的小助手函数。

基本上是像往常一样传递你的承诺，并提供一个回调，以实现你想要的进展。

​

function allProgress(proms, progress_cb) {
  let d = 0;
  progress_cb(0);
  for (const p of proms) {
    p.then(()=> {    
      d ++;
      progress_cb( (d * 100) / proms.length );
    });
  }
  return Promise.all(proms);
}

function test(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
       console.log(`Waited ${ms}`);
       resolve();
     }, ms);
  });
}


allProgress([test(1000), test(3000), test(2000), test(3500)],
  (p) => {
     console.log(`% Done = ${p.toFixed(2)}`);
});

​

Answer 2

您可以在每个承诺中添加一个.then()来计算完成的时间。类似于：

​

var count = 0;

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, 'boo');
}); 
var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 7000, 'yoo');
}); 
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'foo');
}); 

var promiseArray = [
  p1.then(function(val) {
    progress(++count); 
    return val 
  }), 
  p2.then(function(val) {
    progress(++count); 
    return val 
  }), 
  p3.then(function(val) {
    progress(++count); 
    return val 
  })
]

function progress(count) {
  console.log(count / promiseArray.length);
}

Promise.all(promiseArray).then(values => { 
  console.log(values);
});

​

Answer 3

这与基思的回答相比有几个优点

• onprogress()回调从不同步调用。这确保回调可以依赖于调用Promise.progress(...)后同步运行的代码。
• 承诺链将在进程事件中抛出的错误传播给调用方，而不是允许未被承诺的拒绝。这确保了通过健壮的错误处理，调用方能够防止应用程序进入未知状态或崩溃。
• 回调接收的是ProgressEvent而不是百分比。这减少了通过避免商0 / 0来处理NaN进度事件的困难。

Promise.progress = async function progress (iterable, onprogress) {
  // consume iterable synchronously and convert to array of promises
  const promises = Array.from(iterable).map(this.resolve, this);
  let resolved = 0;

  // helper function for emitting progress events
  const progress = increment => this.resolve(
    onprogress(
      new ProgressEvent('progress', {
        total: promises.length,
        loaded: resolved += increment
      })
    )
  );

  // lift all progress events off the stack
  await this.resolve();
  // emit 0 progress event
  await progress(0);

  // emit a progress event each time a promise resolves
  return this.all(
    promises.map(
      promise => promise.finally(
        () => progress(1)
      ) 
    })
  );
};

注意，有有限的支持。如果此覆盖率不符合您的要求，您可以轻松地填充以下内容：

class ProgressEvent extends Event {
  constructor (type, { loaded = 0, total = 0, lengthComputable = (total > 0) } = {}) {
    super(type);
    this.lengthComputable = lengthComputable;
    this.loaded = loaded;
    this.total = total;
  }
}