關於 Promise 的 9 個面試題

做者：dan levy

翻譯：瘋狂的技術宅

原文：danlevy.net/javascript-…

未經容許嚴禁轉載

👇請完成如下9個問題👇

1. 多個 .catch

var p = new Promise((resolve, reject) => {
  reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))
複製代碼

以上代碼的輸出將會是什麼？請選擇正確的答案：

• 打印一次消息

• 打印兩次消息

• UnhandledPromiseRejectionWarning

• 程序退出

解析：

咱們使用構造函數方法建立一個 Promise，並經過 reject 回調當即觸發錯誤。

而後 .catch 工做方式相似於 DOM 的 .addEventListener(event，callback) 或 Event Emitter 的 .on(event，callback)，其中**能夠添加多個回調。**每一個都用一樣的參數進行調用。

2. 多個 .catch

var p = new Promise((resolve, reject) => {
  return Promise.reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))
複製代碼

以上代碼的輸出將會是什麼？請選擇正確的答案：

• 打印一次消息

• 打印兩次消息

• UnhandledPromiseRejectionWarning

• 程序退出

解析：

使用 Promise 構造函數時，必須調用 resolve() 或 reject() 回調。 Promise 構造函數不使用你的返回值，所以實際上不會再收到由 Promise.reject() 建立的其餘 Promise。

在 Promise.reject() 以後沒有 .catch 時，答案是 UnhandledPromiseRejectionWarning。

3. 連接 .then 和 .catch

var p = new Promise((resolve, reject) => {
    reject(Error('The Fails!'))
  })
  .catch(error => console.log(error))
  .then(error => console.log(error))
複製代碼

以上代碼的輸出將會是什麼？請選擇正確的答案：

• 打印錯誤和 undefined

• 打印兩次錯誤

• UnhandledPromiseRejectionWarning

• undefined

解析

當連接 .then 和 .catch 時，將它們視爲一系列步驟會頗有幫助。每一個 .then 都接收前一個 .then 返回的值做爲其參數。可是，若是你的 「step」 遇到錯誤，則任何後續的 .then 「 steps」 都將被跳過，直到遇到 .catch。若是要覆蓋錯誤，你要作的就是返回一個非錯誤值。能夠經過任何隨後的 .then 訪問。

提示： console.log() 老是返回 undefined。

4. 連接 .catch

var p = new Promise((resolve, reject) => {
    reject(Error('The Fails!'))
  })
  .catch(error => console.log(error.message))
  .catch(error => console.log(error.message))
複製代碼

以上代碼的輸出將會是什麼？請選擇正確的答案：

• 打印一次錯誤消息

• 打印兩次錯誤消息

• UnhandledPromiseRejectionWarning

• 程序退出

解析

當連接 .catch 時，每一個僅處理先前的 .then 或 ``.catch「步驟」 中引起的錯誤。在此例中，第一個.catch返回console.log，只能經過在兩個.catch以後添加.then()` 來訪問。

5. 多個 .catch

new Promise((resolve, reject) => {
    resolve('Success!')
  })
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(error => {
    return "actually, that worked"
  })
  .catch(error => console.log(error.message))
複製代碼

以上代碼的輸出將會是什麼？請選擇正確的答案：

• 打印一次消息

• 打印兩次消息

• UnhandledPromiseRejectionWarning

• 不打印任何內容

解析

提示： .catch能夠簡單地經過返回一個常規值來忽略（或覆蓋）錯誤。

該技巧僅在隨後的 .then 接收該值時有效。

6. .then 之間的流程

Promise.resolve('Success!')
  .then(data => {
    return data.toUpperCase()
  })
  .then(data => {
    console.log(data)
  })
複製代碼

以上代碼的輸出將會是什麼？請選擇正確的答案：

• 打印 "Success!" 和 "SUCCESS!"
• 打印 "Success!"
• 打印 "SUCCESS!"
• 不打印任何內容

解析

提示：.then依次傳遞數據，從 return value 到下一個.then(value => /* handle value */)。

爲了將值傳遞給下一個 .then，return 是關鍵。

7. .then 之間的流程

Promise.resolve('Success!')
  .then(data => {
    return data.toUpperCase()
  })
  .then(data => {
    console.log(data)
    return data
  })
  .then(console.log)
複製代碼

以上代碼的輸出將會是什麼？請選擇正確的答案：

• 打印 "SUCCESS!"
• 打印 "Success!"
• 打印 "SUCCESS!" 和 "SUCCESS!"
• 不打印任何內容

解析：

有兩個 console.log 調用將被調用。

8. .then 之間的流程

Promise.resolve('Success!')
  .then(data => {
    data.toUpperCase()
  })
  .then(data => {
    console.log(data)
  })
複製代碼

以上代碼的輸出將會是什麼？請選擇正確的答案：

• 打印 "SUCCESS!"
• 打印 "Success!"
• 打印 "SUCCESS!" 和 "SUCCESS!"
• 打印 undefined

解析：

提示：.then 依次傳遞數據，從返回值到下一個 .then(value => /* handle value */)。

爲了將值傳遞給下一個 .then，return 是關鍵。

9. .then 和 .catch 之間的流程

Promise.resolve('Success!')
  .then(() => {
    throw Error('Oh noes!')
  })
  .catch(error => {
    return 'actually, that worked'
  })
  .then(data => {
    throw Error('The fails!')
  })
  .catch(error => console.log(error.message))
複製代碼

以上代碼的輸出將會是什麼？請選擇正確的答案：

• 打印 "Oh noes!" 和 "The fails!"

• 打印 "Oh noes!"」

• 打印 "The fails!"

• 打印 "actually, that worked"

• 不打印任何內容

解析：

歡迎關注前端公衆號：前端先鋒，免費領取webpack從入門到進階全系列教程。