9个Promise面试题

更新日期: 2019-11-11阅读: 1.9k标签: 面试

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 回调立即触发错误。

然后 .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))

以上代码的输出将会是什么?请选择正确的答案:

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

以上代码的输出将会是什么?请选择正确的答案:

  • [ ] 打印 "Oh noes!" 和 "The fails!"
  • [ ] 打印 "Oh noes!"”
  • [x] 打印 "The fails!"
  • [ ] 打印 "actually, that worked"
  • [ ] 不打印任何内容

原文:https://danlevy.net/javascript-promises-quiz/


链接: https://fly63.com/article/detial/6801

Web前端年后跳槽面试复习指南

很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,

前端面试之webpack面试常见问题

什么是webpack和grunt和gulp有什么不同?什么是bundle,什么是chunk,什么是module?什么是Loader?什么是Plugin?如何可以自动生成webpack配置?webpack-dev-server和http服务器如nginx有什么区别?

每个 JavaScript 工程师都应当知道的 10 个面试题

多问问应聘者高层次的知识点,如果能讲清楚这些概念,就说明即使应聘者没怎么接触过 JavaScript,也能够在短短几个星期之内就把语言细节和语法之类的东西弄清楚。

37个JavaScript基本面试问题和解答

面试比棘手的技术问题要多,这篇文章整理了37个JavaScript基本面试问题和解答,这些仅仅是作为指导。希望对前端开发的你有所帮助!

React常见面试题

React常见面试题:React中调用setState之后发生了什么事情?React中Element与Component的区别?优先选择使用ClassComponent而不是FunctionalComponent?React中的refs属性的作用是什么?React中keys的作用是什么?

有趣的Js面试题_如何让 (a == 1 && a == 2 && a == 3) 返回 true

题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。

js练习笔记:10道JavaScript题目

10道JavaScript题目:累加函数addNum、实现一个Person类、实现一个arrMerge 函数、实现一个toCamelStyle函数、setTimeout实现重复调用、实现一个bind函数、实现一个Utils模块、输出一个对象自身的属性

vue菜鸟从业记:没准备好的面试,那叫尬聊

面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致。另一方面就是看看你简历上做过什么项目,用到了哪些技术栈,一会儿好提问你。

毕业一年左右的前端妹子面试总结

把面试当做学习,这个过程你会收益很大。前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习

vue面试时需要准备的知识点

vue上手可以说是比较轻松而且简单,如果你用过angular,react,你也会很喜欢vue。vue的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template script style

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!