Promise.all和Promise.race區別，和使用場景

1、Pomise.all的使用

常見使用場景 ： 多個異步結果合併到一塊兒

Promise.all能夠將多個Promise實例包裝成一個新的Promise實例。用於將多個Promise實例，包裝成一個新的Promise實例。

1.它接受一個數組做爲參數。

2.數組能夠是Promise對象，也能夠是其它值，只有Promise會等待狀態改變。

3.當全部的子Promise都完成，該Promise完成，返回值是所有值的數組。

4.若是有任何一個失敗，該Promise失敗，返回值是第一個失敗的子Promise的結果。

Promise.all([p1,p2,p3])

先舉例以前咱們 若是有多個異步請求，可是最終用戶想要獲得的是  多個異步結果合併到一塊兒，用以前代碼舉例

 console.log('start');
  var result1,result2="";
  //settimeout 模擬異步請求1
  setTimeout(() => {
    result1="ok1"
  }, 2000);
  //settimeout 模擬異步請求2
  setTimeout(() => {
    result1="ok2"
  }, 3000);
  //等待 異步1 異步2結果
 var tempInterval= setInterval(()=>{
    if(result1&&result2){
      console.log('data result ok ,,, clearInterval')
      clearInterval(tempInterval);
    }
  },100)

使用Promise.all來解決 ，上代碼

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失敗')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失敗了，打出 '失敗'
})

2、Pomise.race的使用

相似於Promise.all() ,區別在於 它有任意一個返回成功後，就算完成，可是 進程不會當即中止

常見使用場景：把異步操做和定時器放到一塊兒，若是定時器先觸發，認爲超時，告知用戶

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功了')
  }, 2000);
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')    
  }, 5000);
})


Promise.race([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})