Promise.all（）

語法：Promise.all(iterable);
參數：iterable
一個可迭代對象，如 Array 或 String。
返回值：如果傳入的參數是一個空的可迭代對象，則返回一個已完成（already resolved）狀態的 Promise。
如果傳入的參數不包含任何 promise，則返回一個異步完成（asynchronously resolved） Promise。注意：Google Chrome 58 在這種情況下返回一個已完成（already resolved）狀態的 Promise。
其它情況下返回一個處理中（pending）的Promise。這個返回的 promise 之后會在所有的 promise 都完成或有一個 promise 失敗時異步地變為完成或失敗。 見下方關於“Promise.all 的異步或同步”示例。返回值將會按照參數內的 promise 順序排列，而不是由調用 promise 的完成順序決定。

Promise.all可以將多個Promise實例包裝成一個新的Promise實例。同時，成功和失敗的返回值是不同的，成功的時候返回的是一個結果數組，而失敗的時候則返回最先被reject失敗狀態的值。

Promise.all([])
全部加載成功 則返回所有resolve按順序所集合的數組
有一個失敗 則立即返回失敗的reject
空數組 則直接成功

 

Promise.all()
1、Promise.all方法可以把多個promise實例包裝成一個新的promise實例；
Promise.all([promise1,promise2]):Promise---最終返回Promise實例；
2.全部加載成功 則返回所有promise實例中resolve（）回來帶的參數，按數組中一一對應的順序所集合的數組
若任意有一個失敗 ，立即決議失敗，將失敗的promise實例（reject()中參數）傳遞給我們；
3.若Promise.all([ ])中，數組為空數組，則立即決議為成功執行resolve( )；



 數組項全部決議為成功時：

            //Promise.all方法可以把多個promise實例 包裝成一個新的promise實例
            //Promise.all([ promise1, promise2]) :Promise   接收一個數組,數組中的每一項都是promise實例,最終返回的也是一個promise實例
            
            //它分三種情況,第一種是數組中的所有promise都決議為成功的話,Promise.all就會決議為成功;
            //第二種是數組中任意一個promise實例決議為失敗的時候,Promise.all就會立即決議為失敗
            //第三種是Promise.all()中是一個空數組的時候,Promise.all就會立即決議為成功
            
            //模擬需要多個請求的數據,才能進行下一步操作的情況


            function getData1(){
                return new Promise( (resolve,reject) => {
                    setTimeout( () => {
                        console.log('第一條數據加載成功');
                        resolve('data1');
                    },1000)
                })
            }
            
            function getData2(){
                return new Promise( (resolve,reject) =>{
                    setTimeout( () => {
                        console.log('第二條數據加載成功');
                        resolve('data2');
                    },1000)
                })
            }
            
            function getData3(){
                return new Promise( (resolve,reject) => {
                    setTimeout( () => {
                        console.log('第三條數據加載成功');
                        resolve('data3');
                    },1000)
                })
            }
            
            function getData4(){
                return new Promise( (resolve,reject) => {
                    setTimeout( () => {
                        console.log('第四條數據加載成功');
                        resolve('data4')
                    },200)
                })
            }
            
            let p = Promise.all( [getData1(), getData2(), getData3(), getData4() ])
            
            p.then(arr => {
                console.log(arr)  // ['data1', 'data2', 'data3', 'data4']
            }, e => {
                console.log(e)
            })

結果如圖：

 

 

 

 

 數組項有一項決議為失敗時：

function getData1(){
                return new Promise( (resolve,reject) => {
                    setTimeout( () => {
                        console.log('第一條數據加載成功');
                        resolve('data1');
                    },1000)
                })
            }
            
            function getData2(){
                return new Promise( (resolve,reject) =>{
                    setTimeout( () => {
                        console.log('第二條數據加載成功');
                        resolve('data2');
                    },1000)
                })
            }
            
            function getData3(){
                return new Promise( (resolve,reject) => {
                    setTimeout( () => {
                        console.log('第三條數據加載成功');
                        resolve('data3');
                    },1000)
                })
            }
            
            function getData4(){
                return new Promise( (resolve,reject) => {
                    setTimeout( () => {
                        console.log('第四條數據加載成功');
                        reject('data4 err')
                    },500)
                })
            }
            
            let p = Promise.all( [getData1(), getData2(), getData3(), getData4() ])
            
            p.then(arr => {
                console.log(arr)  
            }, e => {
                console.log(e)  //data4 err
            })
            

結果如圖：

 

 

 

當數組項為空時，直接決議成功：

function getData1(){
                return new Promise( (resolve,reject) => {
                    setTimeout( () => {
                        console.log('第一條數據加載成功');
                        resolve('data1');
                    },1000)
                })
            }
            
            function getData2(){
                return new Promise( (resolve,reject) =>{
                    setTimeout( () => {
                        console.log('第二條數據加載成功');
                        resolve('data2');
                    },1000)
                })
            }
            
            function getData3(){
                return new Promise( (resolve,reject) => {
                    setTimeout( () => {
                        console.log('第三條數據加載成功');
                        resolve('data3');
                    },1000)
                })
            }
            
            function getData4(){
                return new Promise( (resolve,reject) => {
                    setTimeout( () => {
                        console.log('第四條數據加載成功');
                        reject('data4 err')
                    },500)
                })
            }
            
            let p = Promise.all( [ ])
            
            p.then(()=> {
                console.log('數組為空')  // 數組為空
            }, e => {
                console.log(e)
            })

結果如圖：

 

 

 

 

Promse.all在處理多個異步處理時非常有用，比如說一個頁面上需要等兩個或多個ajax的數據回來以后才正常顯示，在此之前只顯示loading圖標。

代碼模擬：

 

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒來`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒來', '2秒后醒來' ]
}).catch((error) => {
  console.log(error)
})

 

需要特別注意的是，Promise.all獲得的成功結果的數組里面的數據順序和Promise.all接收到的數組順序是一致的，即p1的結果在前，即便p1的結果獲取的比p2要晚。這帶來了一個絕大的好處：在前端開發請求數據的過程中，偶爾會遇到發送多個請求並根據請求順序獲取和使用數據的場景，使用Promise.all毫無疑問可以解決這個問題。