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