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

一、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)      // 失敗了，打出 '失敗'
})

二、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)
})