promise的靜態方法

前言

前一篇我們已經介紹了關於自己實現promise的文章前端面試題之手寫promise，本篇我們主要介紹的是promise的靜態方法all、race、allSettled、any，靜態方法就是類和建構函式自帶的方法，不是promise例項的方法then、catch、finally等。

Promise.all

1. 語法
   • Promise.all方法接受一個引數，引數型別必須是一個數組，數組裡面每一項都是一個promise例項，該方法會返回一個新的promise例項
   • 每一個例項的狀態如果都是成功fulfilled狀態，新返回的promise例項newProm會執行then方法，then方法裡面res
     是每一個例項的終值，res是一個數組，數組裡面每一個終值的順序由我們在呼叫promise.all傳遞的引數在陣列順序決定，不受每個例項獲取終值的時間決定。

       // 每一個例項全部成功
       const p1 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve('p1')
           }, 3000)
       })
       const p2 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve('p2')
           }, 2000)
       })
       const p3 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve('p3')
           }, 1000)
       })
       const newPro = Promise.all([p1,p2,p3])
       newPro.then(res=>{
           console.log(res) // ['p1', 'p2', 'p3']
           // res獲取終值的順序由all引數[p1,p2,p3]順序決定，不會由每一個例項獲取終值時間決定
       })
    
   

   • 只要有一個例項的狀態是失敗reject，新返回的promise例項會執行catch方法，該方法裡面能夠獲取err,err就是最快出錯例項的拒因。

       // 每一個例項全部成功
       const p1 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve('p1')
           }, 3000)
       })
       const p2 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               reject('p2')
           }, 2000)
       })
       const p3 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               reject('p3')
           }, 1000)
       })
       const newPro = Promise.all([p1,p2,p3])
       newPro.catch(err => {
           console.log(err) // 'p2'
           // 例項p2最先出錯，所以獲取的err是'p2'
       })
    
   

2. 應用場景
   • 專案中某個操作依賴於兩個或者多個請求的結果再進行處理
   • 比如：首頁需要等所有介面資料都返回才會顯示頁面，否則都會顯示骨架圖。

Promise.race

1. 語法
   • Promise.race方法接受一個引數，引數型別必須是一個數組，數組裡面每一項都是一個promise例項，該方法會返回一個新的promise例項
   • race方法不會關注promise例項的狀態，只會關注哪個例項先有結果，這個結果可能是一個終值，也有可能是一個拒因。

       // 例項先有成功的狀態
       const p1 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve('p1')
           }, 3000)
       })
       const p2 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               reject('p2')
           }, 2000)
       })
       const p3 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve('p3')
           }, 1000)
       })
       const newPro = Promise.race([p1,p2,p3])
       newPro.then(res => {
           console.log(res) // 'p3'
       })
   

       // 例項先有失敗的狀態
       const p1 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve('p1')
           }, 3000)
       })
       const p2 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               reject('p2')
           }, 2000)
       })
       const p3 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               reject('p3')
           }, 1000)
       })
       const newPro = Promise.race([p1,p2,p3])
       newPro.catch(err => {
           console.log(err) // 'p3'
       })
   

2. 應用場景
   • 專案裡面測試cdn的速度，就是專案裡面介面會部署幾個伺服器，我們獲取最快的伺服器地址
   • fetch請求超時設定取消請求

Promise.allSettled

1. 語法
   • Promise.allSettled方法接受一個引數，引數型別必須是一個數組，數組裡面每一項都是一個promise例項，該方法會返回一個新的promise例項
   • allSettled方法無論每一個例項的狀態是成功還是失敗，都會執行then方法，拿到所有例項的結果，返回的res也是一個數組，順序也是由引數的位置決定，不受例項執行時間影響。
   • 返回的res裡面包含每一個例項結果的狀態status，如果是成功返回fulfilled，如果是失敗返回reject
   • 如果是成功返回終值value，如果是失敗返回拒因reason

       // 例項先有成功的狀態
       const p1 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve('p1')
           }, 3000)
       })
       const p2 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               reject('p2')
           }, 2000)
       })
       const p3 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
               reject('p3')
           }, 1000)
       })
       const newPro = Promise.allSettled([p1,p2,p3])
       newPro.then(res => {
           console.log(res)
           /* 
               [
                   { status: 'fulfilled', value: 'p1' },
                   { status: 'rejected', reason: 'p2' },
                   { status: 'rejected', reason: 'p3' }
               ]
            */
       })
   

2. 應用場景
   • 專案裡面同時請求多個介面，無論介面是成功還是失敗我們都要拿到多個介面的返回值

Promise.any

1. 語法
   • Promise.any方法接受一個引數，引數型別必須是一個數組，數組裡面每一項都是一個promise例項，該方法會返回一個新的promise例項
   • 注意：此方法需要node高版本支援，建議在瀏覽器環境測試。
   • any方法只要有一個例項狀態成功就會執行then方法，得到這個例項的終值，這一點和race相同

       const p1 = new Promise((resolve, reject) => {
           setTimeout(() => {
               resolve('p1')
           }, 3000)
       })
       const p2 = new Promise((resolve, reject) => {
           setTimeout(() => {
               reject('p2')
           }, 2000)
       })
       const p3 = new Promise((resolve, reject) => {
           setTimeout(() => {
               reject('p3')
           }, 1000)
       })
       Promise.any([p1, p2, p3]).then(res => {
           console.log(res) // 'p1'
       })
   

   • 和race不同的是它不會因為一個例項失敗就執行catch，它會等所有例項都失敗才執行catch方法。

       const p1 = new Promise((resolve, reject) => {
           setTimeout(() => {
               reject('p1')
           }, 3000)
       })
       const p2 = new Promise((resolve, reject) => {
           setTimeout(() => {
               reject('p2')
           }, 2000)
       })
       const p3 = new Promise((resolve, reject) => {
           setTimeout(() => {
               reject('p3')
           }, 1000)
       })
   
       Promise.any([p1, p2, p3]).catch(err => {
           console.log(err) // AggregateError: All promises were rejected
       })
   

2. 應用場景
   • Promise.any作用和race幾乎相同，暫未發現異同之處

結語

• 以上便是對於Promise靜態方法的總結，如有不足，歡迎指正，謝謝！