Promise.all( ) 的使用

Promise.all(iterable) 方法返回一個 Promise 實例，此實例在 iterable 參數內所有的 promise 都“完成（resolved）”或參數中不包含 promise 時回調完成（resolve）；如果參數中  promise 有一個失敗（rejected），此實例回調失敗（reject），失敗原因的是第一個失敗 promise 的結果。

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

語法
Promise.all(iterable);

參數

iterable一個可迭代對象，如 Array 或 String。

返回值

1.如果傳入的參數是一個空的可迭代對象，則返回一個已完成（already resolved）狀態的 Promise。

2.如果傳入的參數不包含任何 promise，則返回一個異步完成（asynchronously resolved） Promise。注意：Google Chrome 58 在這種情況下返回一個已完成（already resolved）狀態的 Promise。

3.其它情況下返回一個處理中（pending）的Promise。這個返回的 promise 之后會在所有的 promise 都完成或有一個 promise 失敗時異步地變為完成或失敗。 見下方關於“Promise.all 的異步或同步”示例。返回值將會按照參數內的 promise 順序排列，而不是由調用 promise 的完成順序決定。

說明

此方法在集合多個 promise 的返回結果時很有用。

完成（Fulfillment）：
如果傳入的可迭代對象為空，Promise.all 會同步地返回一個已完成（resolved）狀態的promise。
如果所有傳入的 promise 都變為完成狀態，或者傳入的可迭代對象內沒有 promise，Promise.all 返回的 promise 異步地變為完成。
在任何情況下，Promise.all 返回的 promise 的完成狀態的結果都是一個數組，它包含所有的傳入迭代參數對象的值（也包括非 promise 值）。

失敗/拒絕（Rejection）：
如果傳入的 promise 中有一個失敗（rejected），Promise.all 異步地將失敗的那個結果給失敗狀態的回調函數，而不管其它 promise 是否完成。

示例

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 失敗，也是一樣的：

var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
var p = Promise.all(mixedPromisesArray);
console.log(p);
setTimeout(function(){
    console.log('the stack is now empty');
    console.log(p);
});

// logs
// Promise { <state>: "pending" } 
// the stack is now empty
// Promise { <state>: "rejected", <reason>: 44 }

但是，Promise.all 當且僅當傳入的可迭代對象為空時為同步：

var p = Promise.all([]); // will be immediately resolved
var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously
console.log(p);
console.log(p2)
setTimeout(function(){
    console.log('the stack is now empty');
    console.log(p2);
});

// logs
// Promise { <state>: "fulfilled", <value>: Array[0] }
// Promise { <state>: "pending" }
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] }

Promise.all 的快速返回失敗行為

Promise.all 在任意一個傳入的 promise 失敗時返回失敗。例如，如果你傳入的 promise中，有四個 promise 在一定的時間之后調用成功函數，有一個立即調用失敗函數，那么 Promise.all 將立即變為失敗。

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)
});

//From console:
//"reject"

//You can also use .catch
Promise.all([p1, p2, p3, p4, p5]).then(values => { 
  console.log(values);
}).catch(reason => { 
  console.log(reason)
});

//From console: 
//"reject"

參考原文：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all