对Promise.all 的理解

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口(所以数组、Map、Set都可以)，并且只返回一个Promise实例，输入的所有promise的resolve回调的结果会按传入的按顺序作为一个数组的其中一项返回。

当然也支持非promise对象的传入，会作为数组中的一项返回。

返回结果的两个特点

全部成功一起返回：当接收的所有Promise实例都执行成功后才会返回结果，返回的结果是一个数组，返回值将会按照参数内的 promise 顺序排列，而不是由调用 promise 的完成顺序决定。

失败快速返回：当其中一个Promise实例执行失败了就会立刻返回，只返回失败的结果，不会管其他promise执行的结果。

使用方式 - promise 实例全部成功一起返回

let p1 = new Promise((resolve, reject) => {
  resolve('p1')
})
let p2 = new Promise((resolve, reject) => {
  resolve('p2')
})

let p3 = new Promise((resolve, reject) => {
  resolve('p3')
})


//全部成功的情况，接收p1 p2, p3
Promise.all([p1, p2, p3]).then(results => {
  console.log(results)
}).catch(error => {
  console.log(error)
})

使用方式 - 失败快速返回

即便是最后一个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(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
  setTimeout(resolve, 4000, 'four');
});
var p5 = new Promise((resolve, reject) => {
  reject('reject');
});

Promise.all([p1, p2, p3, p4, p5]).then(values => {
  console.log(values);
}, reason => {
  console.log(reason)
});

如果传入的是非promise对象呢？

如果参数中包含非 promise 值，这些值将被忽略，但仍然会被放在返回数组中.

var p = Promise.all([1,2,3]);
var p2 = Promise.all([1,2,3, Promise.resolve(4)]);
var p3 = Promise.all([1,2,3, Promise.reject(5)]);
setTimeout(function(){
    p.then(res=>console.log(res))
     p2.then(res=>console.log(res))
     p3.then(res=>console.log(res))
});

错误处理

因为Proims.all() 结果返回的是一个 promise对象，所以和普通的promise错误处理是一样的。

可以通过reject或者catch来进行捕获。

 //1 catch
 //....
 Promise.all([p1, p2,p3]).then(results => {
    console.log(results)    // ['p1', 'p2']
  }).catch(error => {
    //错误捕获
    console.log(error)
  })
  
 //2 reject
 //....
 Promise.all([p1, p2,p3]).then(results => {
    console.log(results)    // ['p1', 'p2']
  },(error){
 //错误捕获
  console.log(error)
})

模拟实现

上面的几个特点就是我们思考的入口，也是必须要满足的条件。

• 多个promise最后返回一个promise
• 必须全部成功才会返回
• 失败会优先返回，不会等他promise结果

 function customerPromiseAll(promises) {
    return new Promise((resolve, reject) => {
      let resultCount = 0; //计数器
      let promiseLen = promises.length; //传入的promise个数
      let results = new Array(promiseLen);//初始化数组用于存放返回结果
 
      //按顺序执行
      for (let i = 0; i < promiseLen; i++) {
        promises[i].then(value => {
          resultCount++;
          results[i] = value; //保证执行结果的顺序
          if (resultCount === promises.length) {
            return resolve(results) //执行完最后一个promise，则返回
          }
        }, error => {
          reject(error) //执行错误直接reject
        })
      }
    })
  }

验证一下

  let p1 = new Promise(resolve => resolve('p1'))
  let p2 = new Promise(resolve => resolve('p2'))
  let p3 = Promise.reject('p3 error')

  customerPromiseAll([p1, p2]).then(results => {
    console.log(results)    // ['p1', 'p2']
  }).catch(error => {
    console.log(error)
  })

  customerPromiseAll([p1, p2, p3]).then(results => {
    console.log(results)
  }).catch(error => {
    console.log(error)      // 'p3 error'
  })

验证通过，结果没啥毛病，符合预期。

支持非promise对象

上面我们验证传入都是常规的promise对象，如果传入非promise对象呢？

customerPromiseAll([1,2,3]) //emmm .直接报错了

所以我们需要增加验证传入的值是不是promise，非promise对象，则直接resolve。

//验证是否是promise对象
function isPromise(obj) {
  return !!obj  //有实际含义的变量才执行方法，变量null，undefined和''空串都为false
   && (typeof obj === 'object' || typeof obj === 'function') // 初始promise 或 promise.then返回的
   && typeof obj.then === 'function';
}

完整代码 1 非promise 对下直接存入数组

function customerPromiseAll(promises) {
    return new Promise((resolve,reject)=>{
        let resultCount = 0;
        //计数器
        let promiseLen = promises.length;
        //传入的promise个数
        let results = new Array(promiseLen);
        //初始化数组用于存放返回结果

        //按顺序执行
        for (let i = 0; i < promiseLen; i++) {
            if (!isPromise(promises[i])) {
                resultCount++;
                results[i] = promises[i]; //直接存储结果

                if (resultCount === promiseLen) {
                    return resolve(results)
                    //执行完最后一个promise，则返回
                }
            } else {
                promises[i].then(value=>{
                    resultCount++;
                    results[i] = value; //存储resolve的结果
                    //保证执行结果的顺序
                    if (resultCount === promiseLen) {
                        return resolve(results)
                        //执行完最后一个promise，则返回
                    }
                }
                , error=>{
                    reject(error)
                    //执行错误直接reject
                }
               )

            }
        }
    }
   )
}

完整代码2 非promise对象调用Promise.resolve()返回一个promise对象

function customerPromiseAll(promises) {
    return new Promise((resolve,reject)=>{
        let resultCount = 0;
        //计数器
        let promiseLen = promises.length;
        //传入的promise个数
        let results = new Array(promiseLen);
        //初始化数组用于存放返回结果

        //按顺序执行
        for (let i = 0; i < promiseLen; i++) {
            let curPromise = promises[i]
            if (!isPromise(curPromise)) {
                curPromise = Promise.resolve(curPromise)
            }
            curPromise.then(value=>{
                resultCount++;
                results[i] = value;
                //存储resolve的结果
                //保证执行结果的顺序
                if (resultCount === promiseLen) {
                    return resolve(results)
                    //执行完最后一个promise，则返回
                }
            }
            , error=>{
                reject(error)
                //执行错误直接reject
            }
           )

        }
    }
   )
}

最后

平时对Promise.all方法只是处于使用的层面，其实深挖一下的话收获还是很多的。

今天就到这里，希望对你有用。