一. 原理

  • Promise.all(iterable)函数返回一个 Promise，一旦迭代器中的某个 promise拒绝，就采用这个拒绝promise的值作为返回值，否则当迭代器中所有promise解决，按传入顺序返回解决数组。
  • 如果传的迭代为空，Promise.all()会同步地返回一个已完成（resolved）状态的promise。
  • 如果传的迭代中有一个失败，Promise.all()异步地将失败的那个结果给失败状态的回调函数，而不管其它 promise是否完成。
  • 如果传的迭代对象内的promise都变为完成状态/或没有 promise，Promise.all()返回的 promise 异步地变为完成。

  • 也就是说，Promise.all()等待所有都完成或第一个失败。

    二. 应用

  • 用于并发请求，从而优化性能。

  • 页面多个不相关的请求接口，使用并发请求可以有效减少页面响应时间，比如批量上传图片，如果有一个图片失败则终止上传

    三. 手写代码

    1. /**
    2. * @param: Iterator
    3. * @return: Promise
    4. * @description: 
    5. *             传入一个迭代器，内容为多个pending状态的promise实例，返回一个promise实例。
    6. *      当有一个promise执行失败时，返回失败结果。
    7. *      当传入的promise全部成功执行时，返回与传入顺序对应的成功结果数组。
    8. */
    9. Promise.newAll = (iterator) => {
    10.   let promises = Array.from(iterator);
    11.   let count = promises.length;
    12.   let result = [];
    13.   return new Promise((resolve, reject) => {
    14.       for(let i=0; i<promises.length; i++){
    15.           promises[i]
    16.           .then((response) => {
    17.               result[i] = response;
    18.               count--;
    19.               if(count == 0){
    20.                   resolve(result);
    21.               }
    22.           })
    23.           .catch((error) => {
    24.               reject(error);
    25.           })
    26.       }
    27.   });
    28. };

    四. 测试代码

    ```javascript const promise1 = new Promise(function (resolve, reject) { setTimeout(resolve, 2000, ‘promise1’); }); const promise2 = Promise.resolve(‘promise2’); // const promise2 = Promise.reject(‘promise2’); const promise3 = new Promise(function (resolve, reject) { setTimeout(resolve, 1000, ‘promise3’); });

Promise.all([promise1, promise2, promise3]).then(function (values) { console.log(values); }); // [ ‘promise1’, ‘promise2’, ‘promise3’ ] Promise.newAll([promise1, promise2, promise3]).then(function (values) { console.log(values); }); // [ ‘promise1’, ‘promise2’, ‘promise3’ ] ```