1. 程式人生 > >Promise.all和Promise.race區別,和使用場景

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

返回 改變 停止 bsp 異步請求 con ESS res 參數

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

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