Promise.all与Progress结合实现请求进度监听

要批量发起100,1000或者更多个请求，可以借助于Promise.all，但是如何知道请求过程中接口的调用进度情况呢？

/**
 * 模拟异步请求
 */
function timeout(time){
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve(time);
    },time);
  })
}
function allWithProgress(requests, callback){
   let index = 0;
   requests.forEach(item=>{
     item.then(()=>{
       index ++;
       const progress = index*100/arr.length;
       callback(progress);
     })
   });
   return Promise.all(requests);
}
const arr = [timeout(1000),timeout(2000), timeout(3000), timeout(4000), timeout(5000),timeout(6000),timeout(7000), timeout(8000), timeout(9000), timeout(10000)];

allWithProgress(arr, function(progress){
	console.log(progress);
}).then(res=>console.log(res))

应用

前往CodePen

参考阅读：stackoverflow.com/questions/4…