因為實現不了Promise.all，一場面試涼涼了

前端胖頭魚發表於2021-12-06
Promise面試

前言

(ಥ﹏ಥ)曾經真實發生在一個朋友身上的真實事件，面試官讓他手寫一個Promise.all，朋友現場發揮不太好，沒有寫出來，事後他追問面試官給的模糊評價是基礎不夠紮實，原理性知識掌握較少... 當然整場面試失利，並不僅僅是這一個題目，肯定還有其他方面的原因。

但是卻給我們敲響一個警鐘：Promise手寫實現、Promise靜態方法實現早已經是面試中的高頻考題，如果你對其還不甚瞭解，耽誤你10分鐘，我們一起幹到他懂O(∩_∩)O

常見面試手寫系列

胖頭魚最近很想做一件事情，希望可以將前端面試中常見的手寫題寫成一個系列，嘗試將其中涉及到的知識和原理都講清楚，如果你對這個系列也感興趣，歡迎一起來學習噢，目前已有66+手寫題實現啦！

1. 點選檢視日拱一題原始碼地址（目前已有66+個手寫題實現）

2. 掘金專欄

image.png

Promise.resolve

簡要回顧

  1. Promise.resolve(value) 方法返回一個以給定值解析後的Promise 物件。
  2. 如果這個值是一個 promise ，那麼將返回這個 promise ；
  3. 如果這個值是thenable（即帶有"then" 方法），返回的promise會“跟隨”這個thenable的物件，採用它的最終狀態；否則返回的promise將以此值完成。

這是MDN上的解釋，我們挨個看一下

  1. Promise.resolve最終結果還是一個Promise，並且與Promise.resolve(該值)傳入的值息息相關
  2. 傳入的引數可以是一個Promise例項，那麼該函式執行的結果是直接將例項返回
  3. 這裡最主要需要理解跟隨，可以理解成Promise最終狀態就是這個thenable物件輸出的值

小例子


// 1. 非Promise物件，非thenable物件
Promise.resolve(1).then(console.log) // 1

// 2. Promise物件成功狀態
const p2 = new Promise((resolve) => resolve(2))

Promise.resolve(p2).then(console.log) // 2

// 3. Promise物件失敗狀態
const p3 = new Promise((_, reject) => reject('err3'))

Promise.resolve(p3).catch(console.error) // err3

// 4. thenable物件
const p4 = {
  then (resolve) {
    setTimeout(() => resolve(4), 1000)
  }
}
Promise.resolve(p4).then(console.log) // 4

// 5. 啥都沒傳
Promise.resolve().then(console.log) // undefined

原始碼實現

Promise.myResolve = function (value) {
  // 是Promise例項，直接返回即可
  if (value && typeof value === 'object' && (value instanceof Promise)) {
    return value
  }
  // 否則其他情況一律再通過Promise包裝一下 
  return new Promise((resolve) => {
    resolve(value)
  })
}

// 測試一下，還是用剛才的例子
// 1. 非Promise物件，非thenable物件
Promise.myResolve(1).then(console.log) // 1

// 2. Promise物件成功狀態
const p2 = new Promise((resolve) => resolve(2))

Promise.myResolve(p2).then(console.log) // 2

// 3. Promise物件失敗狀態
const p3 = new Promise((_, reject) => reject('err3'))

Promise.myResolve(p3).catch(console.error) // err3

// 4. thenable物件
const p4 = {
  then (resolve) {
    setTimeout(() => resolve(4), 1000)
  }
}
Promise.myResolve(p4).then(console.log) // 4

// 5. 啥都沒傳
Promise.myResolve().then(console.log) // undefined

疑問

從原始碼實現中，並沒有看到對於thenable物件的特殊處理呀！其實確實也不需要在Promise.resolve中處理，真實處理的地方應該是在Promise建構函式中，如果你對這塊感興趣，馬上就會寫Promise的實現篇，期待你的閱讀噢。

Promise.reject

簡要回顧

Promise.reject() 方法返回一個帶有拒絕原因的Promise物件。

Promise.reject(new Error('fail'))
  .then(() => console.log('Resolved'), 
        (err) => console.log('Rejected', err))
// 輸出以下內容        
// Rejected Error: fail
//    at <anonymous>:2:16

原始碼實現

reject實現相對簡單，只要返回一個新的Promise，並且將結果狀態設定為拒絕就可以
Promise.myReject = function (value) {
  return new Promise((_, reject) => {
    reject(value)
  })
}

// 測試一下
Promise.myReject(new Error('fail'))
  .then(() => console.log('Resolved'), 
        (err) => console.log('Rejected', err))

// Rejected Error: fail
//    at <anonymous>:9:18

Promise.all

簡要回顧

Promise.all()方法用於將多個 Promise 例項，包裝成一個新的 Promise 例項。這個靜態方法應該是面試中最常見的啦
const p = Promise.all([p1, p2, p3])

最終p的狀態由p1、p2、p3決定，分成兩種情況。

（1）只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個陣列，傳遞給p的回撥函式。

（2）只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的例項的返回值，會傳遞給p的回撥函式。

const p1 = Promise.resolve(1)
const p2 = new Promise((resolve) => {
  setTimeout(() => resolve(2), 1000)
})
const p3 = new Promise((resolve) => {
  setTimeout(() => resolve(3), 3000)
})

const p4 = Promise.reject('err4')
const p5 = Promise.reject('err5')
// 1. 所有的Promise都成功了
const p11 = Promise.all([ p1, p2, p3 ])
    .then(console.log) // [ 1, 2, 3 ]
      .catch(console.log)
      
// 2. 有一個Promise失敗了
const p12 = Promise.all([ p1, p2, p4 ])
    .then(console.log)
      .catch(console.log) // err4
      
// 3. 有兩個Promise失敗了，可以看到最終輸出的是err4，第一個失敗的返回值
const p13 = Promise.all([ p1, p4, p5 ])
    .then(console.log)
      .catch(console.log) // err4

原始碼實現


Promise.myAll = (promises) => {
  return new Promise((rs, rj) => {
    // 計數器
    let count = 0
    // 存放結果
    let result = []
    const len = promises.length
    
    if (len === 0) {
      return rs([])
    }
    
    promises.forEach((p, i) => {
      // 注意有的陣列項有可能不是Promise，需要手動轉化一下
      Promise.resolve(p).then((res) => {
        count += 1
        // 收集每個Promise的返回值 
        result[ i ] = res
        // 當所有的Promise都成功了，那麼將返回的Promise結果設定為result
        if (count === len) {
          rs(result)
        }
        // 監聽陣列項中的Promise catch只要有一個失敗，那麼我們自己返回的Promise也會失敗
      }).catch(rj)
    })
  })
}

// 測試一下
const p1 = Promise.resolve(1)
const p2 = new Promise((resolve) => {
  setTimeout(() => resolve(2), 1000)
})
const p3 = new Promise((resolve) => {
  setTimeout(() => resolve(3), 3000)
})

const p4 = Promise.reject('err4')
const p5 = Promise.reject('err5')
// 1. 所有的Promise都成功了
const p11 = Promise.myAll([ p1, p2, p3 ])
    .then(console.log) // [ 1, 2, 3 ]
      .catch(console.log)
      
// 2. 有一個Promise失敗了
const p12 = Promise.myAll([ p1, p2, p4 ])
    .then(console.log)
      .catch(console.log) // err4
      
// 3. 有兩個Promise失敗了，可以看到最終輸出的是err4，第一個失敗的返回值
const p13 = Promise.myAll([ p1, p4, p5 ])
    .then(console.log)
      .catch(console.log) // err4
// 與原生的Promise.all返回是一致的

Promise.allSettled

簡要回顧

有時候，我們希望等到一組非同步操作都結束了，不管每一個操作是成功還是失敗，再進行下一步操作。顯然Promise.all(其只要是一個失敗了，結果即進入失敗狀態)不太適合，所以有了Promise.allSettled
Promise.allSettled()方法接受一個陣列作為引數，陣列的每個成員都是一個 Promise 物件，並返回一個新的 Promise 物件。只有等到引數陣列的所有 Promise 物件都發生狀態變更（不管是fulfilled還是rejected），返回的 Promise 物件才會發生狀態變更,一旦發生狀態變更，狀態總是fulfilled，不會變成rejected

還是以上面的例子為例， 我們看看與Promise.all有什麼不同

const p1 = Promise.resolve(1)
const p2 = new Promise((resolve) => {
  setTimeout(() => resolve(2), 1000)
})
const p3 = new Promise((resolve) => {
  setTimeout(() => resolve(3), 3000)
})

const p4 = Promise.reject('err4')
const p5 = Promise.reject('err5')
// 1. 所有的Promise都成功了
const p11 = Promise.allSettled([ p1, p2, p3 ])
    .then((res) => console.log(JSON.stringify(res, null,  2)))

// 輸出 
/*
[
  {
    "status": "fulfilled",
    "value": 1
  },
  {
    "status": "fulfilled",
    "value": 2
  },
  {
    "status": "fulfilled",
    "value": 3
  }
]
*/
      
// 2. 有一個Promise失敗了
const p12 = Promise.allSettled([ p1, p2, p4 ])
    .then((res) => console.log(JSON.stringify(res, null,  2)))
        
// 輸出 
/*
[
  {
    "status": "fulfilled",
    "value": 1
  },
  {
    "status": "fulfilled",
    "value": 2
  },
  {
    "status": "rejected",
    "reason": "err4"
  }
]
*/
      
// 3. 有兩個Promise失敗了
const p13 = Promise.allSettled([ p1, p4, p5 ])
    .then((res) => console.log(JSON.stringify(res, null,  2)))
        
// 輸出 
/*
[
  {
    "status": "fulfilled",
    "value": 1
  },
  {
    "status": "rejected",
    "reason": "err4"
  },
  {
    "status": "rejected",
    "reason": "err5"
  }
]
*/

可以看到：

  1. 不管是全部成功還是有部分失敗，最終都會進入Promise.allSettled的.then回撥中
  2. 最後的返回值中，成功和失敗的項都有status屬性，成功時值是fulfilled，失敗時是rejected
  3. 最後的返回值中，成功含有value屬性，而失敗則是reason屬性

原始碼實現

Promise.myAllSettled = (promises) => {
  return new Promise((rs, rj) => {
    let count = 0
    let result = []
    const len = promises.length
    // 陣列是空的話，直接返回空資料
    if (len === 0) {
      return resolve([])
    }

    promises.forEach((p, i) => {
      Promise.resolve(p).then((res) => {
        count += 1
        // 成功屬性設定 
        result[ i ] = {
          status: 'fulfilled',
          value: res
        }
        
        if (count === len) {
          rs(result)
        }
      }).catch((err) => {
        count += 1
        // 失敗屬性設定 
        result[i] = { 
          status: 'rejected', 
          reason: err 
        }

        if (count === len) {
          rs(result)
        }
      })
    })
  })
}

// 測試一下
const p1 = Promise.resolve(1)
const p2 = new Promise((resolve) => {
  setTimeout(() => resolve(2), 1000)
})
const p3 = new Promise((resolve) => {
  setTimeout(() => resolve(3), 3000)
})

const p4 = Promise.reject('err4')
const p5 = Promise.reject('err5')
// 1. 所有的Promise都成功了
const p11 = Promise.myAllSettled([ p1, p2, p3 ])
    .then((res) => console.log(JSON.stringify(res, null,  2)))

// 輸出 
/*
[
  {
    "status": "fulfilled",
    "value": 1
  },
  {
    "status": "fulfilled",
    "value": 2
  },
  {
    "status": "fulfilled",
    "value": 3
  }
]
*/
      
// 2. 有一個Promise失敗了
const p12 = Promise.myAllSettled([ p1, p2, p4 ])
    .then((res) => console.log(JSON.stringify(res, null,  2)))
        
// 輸出 
/*
[
  {
    "status": "fulfilled",
    "value": 1
  },
  {
    "status": "fulfilled",
    "value": 2
  },
  {
    "status": "rejected",
    "reason": "err4"
  }
]
*/
      
// 3. 有兩個Promise失敗了
const p13 = Promise.myAllSettled([ p1, p4, p5 ])
    .then((res) => console.log(JSON.stringify(res, null,  2)))
        
// 輸出 
/*
[
  {
    "status": "fulfilled",
    "value": 1
  },
  {
    "status": "rejected",
    "reason": "err4"
  },
  {
    "status": "rejected",
    "reason": "err5"
  }
]
*/

Promise.race

簡單回顧

Promise.race()方法同樣是將多個 Promise 例項，包裝成一個新的 Promise 例項。

const p = Promise.race([p1, p2, p3])

只要p1、p2、p3之中有一個例項率先改變狀態，p的狀態就跟著改變。那個率先改變的 Promise 例項的返回值，就傳遞給p的回撥函式。

const p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 1)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 2)
})

Promise.race([p1, p2]).then((value) => {
  console.log(value) // 2
})

Promise.race([p1, p2, 3]).then((value) => {
  console.log(value) // 3
})

原始碼實現

聰明的你一定馬上知道該怎麼實現了，只要瞭解哪個例項先改變了，那麼Promise.race就跟隨這個結果，那麼就可以寫出以下程式碼

Promise.myRace = (promises) => {
  return new Promise((rs, rj) => {
    promises.forEach((p) => {
      // 對p進行一次包裝，防止非Promise物件
      // 並且對齊進行監聽，將我們自己返回的Promise的resolve，reject傳遞給p，哪個先改變狀態，我們返回的Promise也將會是什麼狀態
      Promise.resolve(p).then(rs).catch(rj)
    })
  })
}

// 測試一下
const p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 1)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 2)
})

Promise.myRace([p1, p2]).then((value) => {
  console.log(value) // 2
})

Promise.myRace([p1, p2, 3]).then((value) => {
  console.log(value) // 3
})

結尾

也許你我素未謀面，但很可能相見恨晚。希望這裡能成為你的棲息之地，我願和你一起收穫喜悅，奔赴成長。

以上就是第一篇手寫實現原理解析啦！歡迎大家指正其中可能存在的錯誤和問題

相關文章