DanLevy.net

测验：9 道 JavaScript Promise 题目

别再遗漏任何 Promise。

Hero image for 测验：9 道 JavaScript Promise 题目

你真的懂 JavaScript Promise 吗？

  1. 查看提示（右下角的大按钮）。
  2. 在浏览器的控制台中尝试运行代码（快捷键 F12）或使用 repl.it*。
  3. 欢迎随时 在 Twitter/X 上 @justsml 联系我。我很想听听你的想法！

👇 完成以下 9 道题目 👇

1. 

错误处理

以下代码的输出结果是什么？

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

我们使用构造函数方法创建了一个 Promise，并通过 reject 回调立即触发了一个错误。

随后，.catch 处理程序的行为类似于 DOM 的 .addEventListener(event, callback) 或 Event Emitter 的 .on(event, callback)，即可以添加多个处理程序回调。每个回调都会接收到相同的参数并被调用。

2. 

错误处理

以下代码的输出结果是什么？

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

在使用 Promise 构造函数时，你必须调用 resolve() 或 reject() 回调。Promise 构造函数会忽略执行器（executor）的返回值，因此通过 Promise.reject() 创建的额外 Promise 并未链接到 p。这两个处理程序被附加到了 p 上，而 p 仍处于 pending 状态，与此同时，返回的那个被拒绝的 Promise 会被宿主环境报告为未处理。

5. 

错误处理

以下代码的输出结果是什么？

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

提示： .catch 可以通过返回一个普通值来忽略（或覆盖）错误。

这个技巧只有在后面跟着一个 .then 来接收该值时才有效。

6. 

处理数据

以下代码的输出结果是什么？

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

提示： .then 会按顺序传递数据，从 return value 传递到下一个 .then(value => /* 处理 value */)。

为了将值传递给下一个 .then，return 关键字是必不可少的。

7. 

处理数据

以下代码的输出结果是什么？

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

代码中会有两次 console.log 调用被执行。

8. 

处理数据

以下代码的输出结果是什么？

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

提示： .then 会按顺序传递数据，从 return value 传递到下一个 .then(value => /* 处理 value */)。

为了将值传递给下一个 .then，return 语句是关键。

9. 

处理数据

以下代码的输出结果是什么？

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

annotated-code/question-9-4.webp

Loading comments...