關於 Promise 的 9 個面試題

時間 2020-01-08

原文原文鏈接

做者：dan levy
翻譯：瘋狂的技術宅javascript

原文：https://danlevy.net/javascrip...前端

未經容許嚴禁轉載java

👇請完成如下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))

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

[ ] 打印一次消息
[x] 打印兩次消息
[ ] UnhandledPromiseRejectionWarning
[ ] 程序退出

解析：面試

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

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

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))

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

[ ] 打印一次消息
[ ] 打印兩次消息
[x] 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))

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

[x] 打印錯誤和 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))

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

[x] 打印一次錯誤消息
[ ] 打印兩次錯誤消息
[ ] 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
[x] 不打印任何內容

解析

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

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

6. `.then` 之間的流程

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

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

[ ] 打印 "Success!" 和 "SUCCESS!"
[ ] 打印 "Success!"
[x] 打印 "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!"
[x] 打印 "SUCCESS!" 和 "SUCCESS!"
[ ] 不打印任何內容

解析：

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

8. `.then` 之間的流程

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

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

[ ] 打印 "SUCCESS!"
[ ] 打印 "Success!"
[ ] 打印 "SUCCESS!" 和 "SUCCESS!"
[x] 打印 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))

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