等待所有promise都完成，Promise.all()

阳光穿透心脏的1/2处 2022-04-01 11:16 385阅读 0赞

`Promise.all(iterable)` 方法返回一个 [`Promise`][Promise] 实例，此实例在 `iterable` 参数内所有的 `promise` 都“完成（resolved）”或参数中不包含 `promise` 时回调完成（resolve）；如果参数中  `promise` 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 `promise` 的结果。

## 语法 ##

Promise.all(iterable);

### 参数 ###

iterable

一个[可迭代][Link 1]对象，如 [`Array`][Array] 或 [`String`][String]。

### `Promise.all` 的使用 ###

`Promise.all` 等待所有都完成（或第一个失败）。

var p1 = Promise.resolve(3);
    var p2 = 1337;
    var p3 = new Promise((resolve, reject) => {
      setTimeout(resolve, 100, 'foo');
    }); 
    
    Promise.all([p1, p2, p3]).then(values => { 
      console.log(values); // [3, 1337, "foo"] 
    });

如果参数中包含非 `promise` 值，这些值将被忽略，但仍然会被放在返回数组中（如果 `promise` 完成的话）：

// this will be counted as if the iterable passed is empty, so it gets fulfilled
    var p = Promise.all([1,2,3]);
    // this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled
    var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
    // this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected
    var p3 = Promise.all([1,2,3, Promise.reject(555)]);
    
    // using setTimeout we can execute code after the stack is empty
    setTimeout(function(){
        console.log(p);
        console.log(p2);
        console.log(p3);
    });
    
    // logs
    // Promise { <state>: "fulfilled", <value>: Array[3] }
    // Promise { <state>: "fulfilled", <value>: Array[4] }
    // Promise { <state>: "rejected", <reason>: 555 }

### `Promise.all` 的异步和同步 ###

下面的例子中演示了 `Promise.all` 的异步性（如果传入的可迭代对象是空的，就是同步）：

// we are passing as argument an array of promises that are already resolved,
    // to trigger Promise.all as soon as possible
    var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
    
    var p = Promise.all(resolvedPromisesArray);
    // immediately logging the value of p
    console.log(p);
    
    // using setTimeout we can execute code after the stack is empty
    setTimeout(function(){
        console.log('the stack is now empty');
        console.log(p);
    });
    
    // logs, in order:
    // Promise { <state>: "pending" } 
    // the stack is now empty
    // Promise { <state>: "fulfilled", <value>: Array[2] }

如果 `Promise.all` 失败，也是一样的：

但是，`Promise.all` **当且仅当**传入的可迭代对象为空时为同步：

### `Promise.all` 的快速返回失败行为 ###

`Promise.all` 在任意一个传入的 `promise` 失败时返回失败。例如，如果你传入的 `promise`中，有四个 `promise` 在一定的时间之后调用成功函数，有一个立即调用失败函数，那么 `Promise.all` 将立即变为失败。

[Promise]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol
[Array]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Array
[String]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/String