0%

ES6系列之Promise题合集

发表于 分类于
本文字数： 8.5k 阅读时长 ≈ 8 分钟

关于 Promise 的讲解文章实在太多了，在此我就不写讲解了，直接实战检测自己对 Promise 的理解，下面是我做过的众多 Promise 题里面挑出来的 13 道题，我觉得容易错或者值得考究知识点的题，如果你想考察自己对 Promise 的掌握程度，可以做做看。

题目

题目 1

1
2
3
4
5
6
7
8
9
const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
  resolve('resolve1')
})
const promise2 = promise1.then(res => {
  console.log(res)
})
console.log('1', promise1)
console.log('2', promise2)

分析：

  • 先遇到new Promise，执行该构造函数中的代码输出 promise1
  • 遇到resolve函数, 将promise1的状态改变为fulfilled, 并将结果保存下来
  • 碰到promise1.then这个微任务，返回的是Promise的pending状态，将它放入微任务队列
  • 故promise2是一个新的状态为pending的Promise
  • 继续执行同步代码输出promise1的状态是fulfilled，输出promise2的状态是pending
  • 宏任务执行完毕，查找微任务队列，发现promise1.then这个微任务且状态为fulfilled，执行它。

输出结果：

1
2
3
4
promise1
1 Promise{<fulfilled>: 'resolve1'}
2 Promise{<pending>}
resolve1

题目 2

1
2
3
4
5
6
7
8
9
10
11
12
13
const promise = new Promise((resolve, reject) => {
  console.log(1)
  setTimeout(() => {
    console.log('timerStart')
    resolve('success')
    console.log('timerEnd')
  }, 0)
  console.log(2)
})
promise.then(res => {
  console.log(res)
})
console.log(4)

分析：

  • 执行new Promsise，输出1，setTimeout宏任务加到宏任务队列，继续执行同步代码输出2
  • 遇到promise.then，但其状态还是 pending，这里理解为先不执行；然后输出同步代码4
  • 一轮循环过后，进入第二次宏任务，发现延迟队列中有setTimeout定时器，执行它
  • 输出timerStart，遇到resolve，将promise的状态改为fulfilled且保存结果并将之前的promise.then推入微任务队列
  • 继续执行同步代码timerEnd
  • 宏任务全部执行完毕，查找微任务队列，发现promise.then这个微任务，执行它。

输出结果：

1
2
3
4
5
6
1
2
4
timerStart
timerEnd
success

题目 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
const promise2 = promise1.then(() => {
  throw new Error('error!!!')
})
console.log('promise1', promise1)
console.log('promise2', promise2)
setTimeout(() => {
  console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 2000)

分析：

  • 从上至下，先执行第一个new Promise中的函数，碰到setTimeout将它加入下一个宏任务列表
  • 跳出new Promise，碰到promise1.then这个微任务，但其状态还是为pending，这里理解为先不执行；故promise2是一个新的状态为pending的Promise
  • 执行同步代码console.log('promise1')，输出promise1的状态为pending
  • 执行同步代console.log('promise2')，输出promise2的状态为pending
  • 碰到第二个setTimeout，将其放入下一个宏任务列表
  • 第一轮宏任务执行结束，并且没有微任务需要执行，因此执行第二轮宏任务
  • 先执行第一个定时器里的内容，将promise1的状态改为fulfilled且保存结果并将之前的promise1.then推入微任务队列
  • 该定时器中没有其它的同步代码可执行，因此执行本轮的微任务队列，也就是promise1.then，它抛出了一个错误，且将promise2的状态设置为了rejected
  • 第一个定时器执行完毕，开始执行第二个定时器中的内容
  • 打印出promise1，且此时promise1的状态为fulfilled
  • 打印出promise2，且此时promise2的状态为rejected
1
2
3
4
5
promise1 Promise {<pending>}
promise2 Promise {<pending>}
Uncaught (in promise) Error: error!!! at <anonymous>:7:9
promise1 Promise {<fulfilled>: "success"}
promise2 Promise {<rejected>: Error: error!!! at <anonymous>:7:9}

题目 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const promise = new Promise((resolve, reject) => {
  reject('error')
  resolve('success2')
})
promise
  .then(res => {
    console.log('then1: ', res)
  })
  .then(res => {
    console.log('then2: ', res)
  })
  .catch(err => {
    console.log('catch: ', err)
  })
  .then(res => {
    console.log('then3: ', res)
  })

分析：

  • catch不管被连接到哪里，都能捕获上层未捕捉过的错误。
  • 由于 catch()也会返回一个Promise，且由于这个Promise没有返回值，所以打印出来的是undefined。

输出结果：

1
2
catch:  error
then3:  undefined

题目 5

1
2
3
4
5
6
7
8
9
10
Promise.resolve()
  .then(() => {
    return new Error('error!!!')
  })
  .then(res => {
    console.log('then: ', res)
  })
  .catch(err => {
    console.log('catch: ', err)
  })

分析：

  • 在Promise中，返回任意一个非promise的值都会被包裹成promise对象，例如return new Error('error!!!')会被包装为return Promise.resolve(new Error('error!!!'))
  • .then或者 .catch 中 return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获。

当然如果你抛出一个错误的话，可以用下面任意一种：

1
2
3
return Promise.reject(new Error('error!!!'))
// or
throw new Error('error!!!')

输出结果：

1
then:  Error: error!!!

题目 6

1
2
3
4
const promise = Promise.resolve().then(() => {
  return promise
})
promise.catch(console.err)

分析：

  • .then 或 .catch 返回的值不能是 promise 本身，否则会造成死循环。

输出结果：

1
Promise {<rejected>: TypeError: Chaining cycle detected for promise #<Promise>}

题目 7

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

分析：

  • .then 或者 .catch 的参数期望是函数，传入非函数则会发生值透传。
  • 第一个then和第二个then中传入的都不是函数，一个是数字类型，一个是对象类型，因此发生了透传，将resolve(1) 的值直接传到最后一个then里。

输出结果：

1
1

题目 8

1
2
3
4
5
6
7
8
9
10
11
12
Promise.reject('err!!!')
  .then(
    res => {
      console.log('success', res)
    },
    err => {
      console.log('error', err)
    }
  )
  .catch(err => {
    console.log('catch', err)
  })

分析：

  • .then函数的第一个参数是用来处理Promise成功的函数，第二个则是处理失败的函数。
  • Promise.resolve('err!!!')的值会进入成功的函数，Promise.reject('err!!!')的值会进入失败的函数。
  • 如果去掉第二个参数，就会进入catch()中

输出结果：

1
'error' 'error!!!'

题目 9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Promise.resolve('1')
  .then(res => {
    console.log(res)
  })
  .finally(() => {
    console.log('finally')
  })
Promise.resolve('2')
  .finally(() => {
    console.log('finally2')
    return '我是finally2返回的值'
  })
  .then(res => {
    console.log('finally2后面的then函数', res)
  })

分析：

  • .finally()方法不管Promise对象最后的状态如何都会执行
  • 它最终返回的默认会是一个上一次的Promise对象值，不过如果抛出的是一个异常则返回异常的Promise对象。
  • 第一行代码遇到Promise.resolve('1'),再把.then()加入微任务，这时候要注意，代码并不会接着往链式调用的下面走，也就是不会先将.finally加入微任务列表，那是因为.then本身就是一个微任务，它链式后面的内容必须得等当前这个微任务执行完才会执行，因此这里我们先不管.finally()
  • 执行Promise.resolve('2')，把.finally加入微任务队列，且链式调用后面的内容得等该任务执行完后才执行
  • 本轮宏任务执行完，执行微任务列表第一个微任务输出1，遇到.finally()，将它加入微任务列表（第三个）待执行；再执行第二个微任务输出finally2，遇到.then，把它加入到微任务（第四个）列表待执行
  • 本轮执行完两个微任务后，检索微任务列表发现还有两个微任务，故执行，输出finally和finally2后面的then函数 2

输出结果：

1
2
3
4
1
finally2
finally
finally2后面的then函数 2

题目 10

1
2
3
4
5
6
7
8
9
10
11
async function async1() {
  console.log('async1 start')
  await new Promise(resolve => {
    console.log('promise1')
  })
  console.log('async1 success')
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

分析：

  • 在async1中await后面的Promise是没有返回值的，也就是它的初始状态是pending状态，因此相当于一直在await
  • 所以在await之后的内容是不会执行的，也包括async1后面的.then。

输出结果：

1
2
3
4
srcipt start
async1 start
promise1
srcipt end

题目 11

1
2
3
4
5
6
7
8
9
10
11
12
async function async1() {
  await async2()
  console.log('async1')
  return 'async1 success'
}
async function async2() {
  return new Promise((resolve, reject) => {
    console.log('async2')
    reject('error')
  })
}
async1().then(res => console.log(res))

分析：

  • await后面跟着的是一个状态为rejected的promise。
  • 如果在async函数中抛出了错误，则终止错误结果，不会继续向下执行。

输出结果：

1
2
async2
Uncaught (in promise) error

题目 12

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var p1 = new Promise(function (resolve, reject) {
  foo.bar()
  resolve(1)
})

p1.then(
  function (value) {
    console.log('p1 then value: ' + value)
  },
  function (err) {
    console.log('p1 then err: ' + err)
  }
).then(
  function (value) {
    console.log('p1 then then value: ' + value)
  },
  function (err) {
    console.log('p1 then then err: ' + err)
  }
)

var p2 = new Promise(function (resolve, reject) {
  resolve(2)
})

p2.then(
  function (value) {
    console.log('p2 then value: ' + value)
    foo.bar()
  },
  function (err) {
    console.log('p2 then err: ' + err)
  }
)
  .then(
    function (value) {
      console.log('p2 then then value: ' + value)
    },
    function (err) {
      console.log('p2 then then err: ' + err)
      return 1
    }
  )
  .then(
    function (value) {
      console.log('p2 then then then value: ' + value)
    },
    function (err) {
      console.log('p2 then then then err: ' + err)
    }
  )

分析：

Promise 中的异常由 then 参数中第二个回调函数（Promise 执行失败的回调）处理，异常信息将作为 Promise 的值。异常一旦得到处理，then 返回的后续 Promise 对象将恢复正常，并会被 Promise 执行成功的回调函数处理。另外，需要注意 p1、p2 多级 then 的回调函数是交替执行的 ，这正是由 Promise then 回调的异步性决定的。

输出结果：

1
2
3
4
5
p1 then err: ReferenceError: foo is not defined
p2 then value: 2
p1 then then value: undefined
p2 then then err: ReferenceError: foo is not defined
p2 then then then value: 1

题目 13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var p1 = new Promise(function (resolve, reject) {
  resolve(Promise.resolve('resolve'))
})

var p2 = new Promise(function (resolve, reject) {
  resolve(Promise.reject('reject'))
})

var p3 = new Promise(function (resolve, reject) {
  reject(Promise.resolve('resolve'))
})

p1.then(
  function fulfilled(value) {
    console.log('fulfilled: ' + value)
  },
  function rejected(err) {
    console.log('rejected: ' + err)
  }
)

p2.then(
  function fulfilled(value) {
    console.log('fulfilled: ' + value)
  },
  function rejected(err) {
    console.log('rejected: ' + err)
  }
)

p3.then(
  function fulfilled(value) {
    console.log('fulfilled: ' + value)
  },
  function rejected(err) {
    console.log('rejected: ' + err)
  }
)

分析：

Promise 回调函数中的第一个参数 resolve，会对 Promise 执行”拆箱”动作。即当 resolve 的参数是一个 Promise 对象时，resolve 会”拆箱”获取这个 Promise 对象的状态和值，但这个过程是异步的。p1”拆箱”后，获取到 Promise 对象的状态是 resolved，因此 fulfilled 回调被执行；p2”拆箱”后，获取到 Promise 对象的状态是 rejected，因此 rejected 回调被执行。但 Promise 回调函数中的第二个参数 reject 不具备”拆箱“的能力，reject 的参数会直接传递给 then 方法中的 rejected 回调。因此，即使 p3 reject 接收了一个 resolved 状态的 Promise，then 方法中被调用的依然是 rejected，并且参数就是 reject 接收到的 Promise 对象。

输出结果：

1
2
3
p3 rejected: [object Promise]
p1 fulfilled: resolve
p2 rejected: reject

特别鸣谢

这些题是我从下面两个链接的题目又选出来的，仅作为自己的错题集/笔记题来记录，方便以后我自己检验回顾。如果你想更全面学，建议直接去做下面两篇的题。

-------------本文结束感谢您的阅读-------------