promise中race和all的使用場景

Promise.race（）：

race的用法：誰跑的快，以誰爲準執行回調。

race的使用場景：比如我們可以用race給某個異步請求設置超時時間，並且在超時後執行相應的操作，代碼如下：

 //請求某個圖片資源
    function requestImg(){
        var p = new Promise((resolve, reject) => {
            var img = new Image();
            img.onload = function(){
                resolve(img);
            }
            img.src = '圖片的路徑';
        });
        return p;
    }
    //延時函數，用於給請求計時
    function timeout(){
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('圖片請求超時');
            }, 5000);
        });
        return p;
    }
    Promise.race([requestImg(), timeout()]).then((data) =>{
        console.log(data);
    }).catch((err) => {
        console.log(err);
    });

我們把這兩個返回Promise對象的函數放進race，於是他倆就會賽跑，如果5秒之內圖片請求成功了，那麼遍進入then方法，執行正常的流程。如果5秒鐘圖片還未成功返回，那麼timeout就跑贏了，則進入catch，報出“圖片請求超時”的信息。

Promise.all():

all的用法：誰跑的慢，以誰爲準執行回調。

在前端的開發實踐中，我們有時會遇到需要發送多個請求並根據請求順序返回數據的需求，比如，我們要發送a、b、c三個請求，這三個請求返回的數據分別爲a1、a2、a3，而我們想要a1、a2、a3按照我們希望的順序返回。那麼，使用Promise.all()方法可以完美的解決這一問題。

//模擬異步請求的函數
let request = (name, time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let random = Math.random()
            if (random >= 0.2) {
                resolve(`${name}成功了`)
            } else {
                reject(`${name}失敗了`)
            }
        }, time)    
    })
}

//構建三個Promise實例
let a = request('小明', 1000)
let b = request('小紅', 500)
let c = request('小華', 1500)

//使用Promise.all(), 注意它接收的是一個數組作爲參數 
Promise.all([b,a,c]).then(result => {
    console.log(result)
}).catch(result => {
    console.log(result)
})

如果三個請求都成功的話，那麼這三個請求所返回的數據就是按照發送請求的順序排列的，即['小紅成功了', '小明成功了', '小華成功了']，而且還是以數組形式返回的；而當其中有請求失敗了的話，就只會返回最先失敗的結果。

當然，除了這個場景以外，Promise.all()方法還能用於其它地方。比如說，一個頁面上有兩個請求，只有拿到了這兩個請求的數據，頁面纔會展示，在這之前會顯示一個loading加載圖。使用Promise.all()也是可以非常簡潔的解決這個問題。

all和race傳入的數組中如果有會拋出異常的異步任務，那麼只有最先拋出的錯誤會被捕獲，並且是被then的第二個參數或者後面的catch捕獲；但並不會影響數組中其它的異步任務的執行。