Promise的常见面试题

一、对Promise的理解以及Promise的基本用法二、Promise的其他常见方法三、Promise的常见面试题① 多个.catch② 多个.catch（不懂）③ 链接.then和.catch（不懂）④ 链接.catch（不懂）⑤ 多个.catch（不懂）⑥.then之间的流程⑦.then之间的流程⑧.then之间的流程⑨.then和.catch之间的流程（不懂）⑩ 基础输出题11、用Prom

小草莓蹦蹦跳

3011人浏览 · 2023-07-04 14:14:31

小草莓蹦蹦跳 · 2023-07-04 14:14:31 发布

一、对Promise的理解以及Promise的基本用法

③ 链接 .then 和 .catch（不懂）

⑨ .then 和 .catch 之间的流程（不懂）

⑩ 基础输出题

11、用Promise实现红绿灯不断交替亮灯的逻辑

12、程序输出案例：理解 js执行机制

13、用Promise实现传入的函数顺序执行的逻辑

14、用Promise封装一个异步加载图片的方法

15、用Promise实现尽可能快速地将所有图片下载完成

一、对Promise的理解以及Promise的基本用法

对Promise的理解以及Promise的基本用法_小草莓蹦蹦跳的博客-CSDN博客

二、Promise的其他常见方法

Promise的其他方法_小草莓蹦蹦跳的博客-CSDN博客

三、Promise的常见面试题

① 多个 `.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))

以上代码的输出将会是什么？

打印两次 The Fails!

解析：我们使用构造函数方法创建一个 Promise，并通过 reject 回调立即触发错误。然后 .catch 工作方式类似于 DOM 的 .addEventListener(event，callback) 或 Event Emitter 的 .on(event，callback)，其中可以添加多个回调。每个都用同样的参数进行调用。

② 多个 `.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))

以上代码的输出将会是什么？

解析：

使用 Promise 构造函数时，必须调用 resolve() 或 reject() 回调。 Promise 构造函数不使用你的返回值，因此实际上不会再收到由 Promise.reject() 创建的其他 Promise。

在 Promise.reject() 之后没有 .catch 时，答案是上面的截图。

③ 链接 `.then` 和 `.catch`（不懂）

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

以上代码的输出将会是什么？

打印错误和 undefined

解析：

当链接 .then 和 .catch 时，将它们视为一系列步骤会很有帮助。每个 .then 都接收前一个 .then 返回的值作为其参数。但是，如果你的 “step” 遇到错误，则任何后续的 .then “ steps” 都将被跳过，直到遇到 .catch。如果要覆盖错误，你要做的就是返回一个非错误值。可以通过任何随后的 .then 访问。

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

④ 链接 `.catch`（不懂）

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

以上代码的输出将会是什么？

The Fails!

解析

当链接 .catch 时，每个仅处理先前的 .then 或 `.catch “步骤” 中引发的错误。

在此例中，第一个 .catch 返回 console.log，只能通过在两个 .catch 之后添加 .then() 来访问。

⑤ 多个 `.catch`（不懂）

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 接收该值时有效。

⑥ `.then` 之间的流程

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

以上代码的输出将会是什么？

SUCCESS!

提示：.then依次传递数据，从 return value 到下一个.then(value => /* handle value */)。为了将值传递给下一个 .then，return 是关键。

⑦ `.then` 之间的流程

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

以上代码的输出将会是什么？

打印 "SUCCESS!" 和 "SUCCESS!"

解析：

有两个 console.log 调用将被调用。

⑧ `.then` 之间的流程

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

以上代码的输出将会是什么？

打印 undefined

提示：.then 依次传递数据，从返回值到下一个 .then(value => /* handle value */)。

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

⑨ `.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))

以上代码的输出将会是什么？

The fails!

⑩ 基础输出题

1）以下代码最后输出什么？

        var promise = new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve(1);
            }, 3000)
        })
        
        // 打印结果是？？
        promise
            .then(() => {
                return Promise.resolve(2)
            })
            .then(n => {
                console.log(n)
            })


        // 打印结果是？？
        promise
            .then(() => {
                return 2
            })
            .then(n => {
                console.log(n)
            })


        // 打印结果是？？
        promise.then(2).then(n => {
            console.log(n)
        })

输出2。Promise.resolve 就是一个 Promise 对象就相当于返回了一个新的 Promise 对象。然后在下一个事件循环里才会去执行 then

输出2。和上一点不一样的是，它不用等下一个事件循环。

输出1。then 和 catch 期望接收函数做参数，如果非函数就会发生 Promise 穿透现象，打印的是上一个 Promise 的返回。

2）以下代码最后输出什么？

        const promise = new Promise((resolve, reject) => {
            resolve('success1');
            reject('error');
            resolve('success2');
        });

        promise
            .then((res) => {
                console.log('then: ', res);
            })
            .catch((err) => {
                console.log('catch: ', err);
            });

打印：then: success1

牢牢记住 Promise 对象的状态只能被转移一次，resolve('success1') 时状态转移到了 fullfilled 。后面 reject 就调用无效了，因为状态已经不是 pending

3）以下代码最后输出什么？ （不懂）

        Promise.resolve()
            .then(() => {
                return new Error('error!!!')
            })
            .then((res) => {
                console.log('then: ', res)
            })
            .catch((err) => {
                console.log('catch: ', err)
            })

没有抛出错误和异常，只是 return 了一个对象，哪怕他是 Error 对象，那自然也是正常走 then 的链式调用下去了，不会触发 catch

4）以下代码最后输出什么？（不懂）

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

Promise.resolve方法的参数如果是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为resolved，Promise.resolve方法的参数，会同时传给回调函数。
then方法接受的参数是函数，而如果传递的并非是一个函数，它实际上会将其解释为then(null)，这就会导致前一个Promise的结果会传递下面。

答案 1