js Promise 等待多个异步操作执行完再去做一些操作

在我们的程序中有些操作是需要等到一些接口的数据返回之后才能做的操作
比如我们在一个页面需要发送好几个请求，这几个请求都发送完了我们再去隐藏 loading效果，一开始我是这样操作的：

 var p1 = new Promise((resolve, reject) => { 
        setTimeout(resolve, 1000, 'one'); 
    }); 
    var p2 = new Promise((resolve, reject) => { 
        setTimeout(resolve, 2000, 'two'); 
    });
    var p3 = new Promise((resolve, reject) => {
        setTimeout(resolve, 3000, 'three');
    });
    var p4 = new Promise((resolve, reject) => {
        setTimeout(resolve, 4000, 'four');
    });
    var p5 = new Promise((resolve, reject) => {
        setTimeout(reject, 4000, 'five');
    });
 function pro() {
        Promise.all([p1, p2, p3, p4,p5]).then(values => { 
            console.log(values);
        }, reason => {
            console.log(reason)
        });
    }
   pro();

执行效果：

image.png

只是返回了失败回调，这显然不是我们想要的效果

但是，我们写好的时候，使用 Promise.all()方法的时候，想起来，Promise.all()这个方法，只要这个方法的任意一个 promise有reject也就是失败状态的时候，promise 不管剩余的其他的promise 是否完成，就会停止当前的监听，那就有可能丢失当前的其他请求的状态和结果，所以我们在写的时候，就应该考虑，我们当前promise的执行权是不是应该交给当前单个promise的回调具体应该怎么操作呢

 var p1 = new Promise((resolve, reject) => { 
        setTimeout(resolve, 1000, 'one'); 
    }); 
    var p2 = new Promise((resolve, reject) => { 
        setTimeout(resolve, 2000, 'two'); 
    });
    var p3 = new Promise((resolve, reject) => {
        setTimeout(reject, 3000, 'three');
    });
    var p4 = new Promise((resolve, reject) => {
        setTimeout(resolve, 4000, 'four');
    });
    var p5 = new Promise((resolve, reject) => {
        setTimeout(resolve, 4000, 'five');
    });
let PromiseArr=[p1,p2,p3,p4,p5];
 function myPromise(promiseList) {
        return promiseList.map(promise =>
            promise.then((res) => ({ status: 'ok', res }), (err) => ({ status: 'not ok', err }))
        )   
    }
    function pro() {
        Promise.all(myPromise(PromiseArr))
        .then(
            res =>{ 
                  console.log(res);
                  if(PromiseArr.length==res.length){
                  //关闭loading
                  }
            }
            ,err=>console.log(err)
        )
    }
pro()

执行效果：

image.png

然后我们判断，返回结果的数组的长度是否等于传入数组的长度，就能知道请求是发送完成了（不管请求结果是怎样）；
完！！