Promise.all、Promise.race、Promise.allSettled所有靜態方法總結

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靜態方法的總結，如有不足，歡迎指正，謝謝！