疯狂的技术宅

以前出于工作目的,编写和翻译了大量的技术文章,以前端为主,删掉了过时的、毫无营养的内容,留下的都是精华。


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于本站

  • 回到主站

  • 搜索

关于 Promise 的 9 个面试题

时间: 2019-12-10 分类: 前端面试   字数: 1271 字 阅读: 3分钟
标签: #面试题# #面试# #Promise#
  • 本文译自:https://danlevy.net/javascript-promises-quiz/
  • 译者:疯狂的技术宅

👇请完成以下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
  • 程序退出

解析:

annotated-code/question-2.png

使用 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

解析

annotated-code/question-3.png

当链接 .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”
  • 不打印任何内容

解析:

annotated-code/question-9-4.gif

标签: #面试题# #面试# #Promise#

标题:关于 Promise 的 9 个面试题

链接:https://fe-tech.viewnode.com/post/201912/10/

作者:疯狂的技术宅

声明: 本博客文章除特别声明外,均采用 CC BY-NC-ND 4.0 国际许可协议( 知识共享署名-非商业性使用-禁止演绎 4.0),转载请注明出处!

9 个强大的 JavaScript 小技巧
从 JavaScript、ES6、ES7 到 ES10,你学到哪儿了?
  • 文章目录
  • 站点概览
疯狂的技术宅

疯狂的技术宅

退休程序员,硬件发烧友,人工智能爱好者。写写代码喝喝茶,晒晒太阳带带娃。

457 日志
8 分类
583 标签
GitHub
友情链接
  • viewnode
  • mofish
标签云
  • Javascript 172
  • Node.Js 62
  • Vue 36
  • Typescript 28
  • 实战项目 28
  • 面试 21
  • React 20
  • Css 17
  • 面试题 16
  • 教程 13
  • Promise 12
  • Chrome 9
  • Debug 9
  • 调试 9
  • 资源 9
  • Deno 8
  • Dom 8
  • 杂谈 8
  • 正则表达式 8
  • 测试 8
  • 👇请完成以下9个问题👇
    • 1. 多个 .catch
    • 2. 多个 .catch
    • 3. 链接 .then 和 .catch
    • 4. 链接 .catch
    • 5. 多个 .catch
    • 6. .then 之间的流程
    • 7. .then 之间的流程
    • 8. .then 之间的流程
    • 9. .then 和 .catch 之间的流程
© 2018 - 2022 疯狂的技术宅 All Rights Reserved
Powered by - Hugo v0.99.0 / Theme by - NexT
Storage by 俺的服务器 / 冀ICP备2022010157号
0%