精华 Promise 必知必会(十道题)
发布于 2 天前 作者 nswbmw 963 次浏览 最后一次编辑是 1 天前 来自 分享

Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。

题目一

const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})
promise.then(() => {
  console.log(3)
})
console.log(4)

题目二

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)

题目三

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

题目四

Promise.resolve(1)
  .then((res) => {
    console.log(res)
    return 2
  })
  .catch((err) => {
    return 3
  })
  .then((res) => {
    console.log(res)
  })

题目五

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('once')
    resolve('success')
  }, 1000)
})

const start = Date.now()
promise.then((res) => {
  console.log(res, Date.now() - start)
})
promise.then((res) => {
  console.log(res, Date.now() - start)
})

题目六

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

题目七

const promise = Promise.resolve()
  .then(() => {
    return promise
  })
promise.catch(console.error)

题目八

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

题目九

Promise.resolve()
  .then(function success (res) {
    throw new Error('error')
  }, function fail1 (e) {
    console.error('fail1: ', e)
  })
  .catch(function fail2 (e) {
    console.error('fail2: ', e)
  })

题目十

process.nextTick(() => {
  console.log('nextTick')
})
Promise.resolve()
  .then(() => {
    console.log('then')
  })
setImmediate(() => {
  console.log('setImmediate')
})
console.log('end')

结果

执行结果及解释见我的知乎文章:https://zhuanlan.zhihu.com/p/30797777

11 回复

我也出个题

new Promise(resolve=>{
		resolve(new Promise(reject=>{
			setTimeout(()=>{
				reject(Promise.resolve(1))
			},3000)
		}))	
})
.then(console.log)
.catch(console.log)

@5196666qwe 厉害了…

@nswbmw 能详细讲一下 microtask 和macrotask 吗?

@leavesdrift 下一篇文章讲

@nswbmw 坐等大佬讲解 microtask 和 macrotask, 之前看过很多文章,都没弄清楚为什么要设计成 microtask 和 macrotask。还有浏览器和 event loop 的关系,自己感觉浏览器一个 event loop 就可以,但是有些地方说的是浏览器不止一个 event loop。感谢~

@taooba event loop有轮数,然后task的类型也有分(不知道这么说对不对)

@5196666qwe 这个是类似例子8?

@qingmingsang 例子8是then中的参数如果不是函数,就会穿透下去。 1楼的例子是因为resolve一个promise实例时,这个resolve的promise会继续执行下去,直到resolve的不是promise,then才会执行

@5196666qwe 谨防陷阱题!!! 你最内层Promise的 reject 实际是 resovle,所以并不会产生异常被 catch 住,而是 3 秒后正常打印 1

回到顶部