promise 面试题

一、基础题

题目1

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

1.Promise 对象一旦创建会立即执行

• 执行console.log(1)，输出1
• 执行resolve(2)，promise的状态由pending变为fulfilled
• 执行console.log(3)，输出3

2.碰到p.then这个微任务，将其加入微任务队列

3.执行console.log(4)，输出4

4.本轮宏任务全部执行完毕，检查微任务队列，发现p.then这个微任务且状态为fulfilled，执行它，输出2

答案： 1 3 4 2

---

题目2

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

1.Promise 对象一旦创建会立即执行

(注意：这里没有使用resolve/reject，Promise 对象的状态始终为pending)

• 执行console.log(1)，输出1
• 执行console.log(2)，输出2

2.碰到p.then这个微任务，将其加入微任务队列

3.执行console.log(4)，输出4

4.本轮宏任务全部执行完毕，检查微任务队列，发现p.then这个微任务但是状态为pending，执行它但不输出任何东西

答案： 1 2 4

---

题目3

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

1.Promise 对象一旦创建会立即执行

• 执行resolve(2)，promise的状态由pending变为fulfilled
• 由于Promise对象的状态一旦改变就不会再改变，所以reject(2) resolve(3)不再起作用
• 执行console.log(4)，输出4

2.碰到p.then这个微任务，将其加入微任务队列

3.执行console.log(5)，输出5

4.本轮宏任务全部执行完毕，检查微任务队列，发现p.then这个微任务且状态为fulfilled，执行它，输出1

答案： 4 5 1

---

题目4

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

1.Promise 对象一旦创建会立即执行

• 执行resolve(1)，promise由pending的状态变为fulfilled
• 执行console.log(2)，输出2

2.碰到p.then（第一个then）这个微任务，将其加入微任务队列

3.执行console.log(5)，输出5

4.本轮宏任务全部执行完毕，检查微任务队列，发现p.then（第一个then）这个微任务且状态为fulfilled，执行它。then方法接受的参数类型需要是函数，如果不是，则会解释为then(null)。第一个then接收的是数字3，实际就是then(null)。执行后返回一个新的Promise对象，这个新的Promise接着调用then方法（链式调用，也就是第二个then，同样会生成一个新的微任务，加入微任务队列）

5.由于步骤4生成了一个新的微任务，微任务队列不为空，继续执行剩余的微任务(也就是步骤4生成的那个新的微任务)。同样，第二个then接收的参数不是函数，而是Promise.resolve(4)(即状态为fulfilled的Promise对象)，所以也会解释为then(null)，执行第二个then同样生成一个新的Promise对象，这个新的Promise接着调用then方法（链式调用，也就是第三个then，同样会生成一个新的微任务，加入微任务队列）

6.由于步骤5生成了一个新的微任务，微任务队列不为空，继续执行剩余的微任务(也就是步骤5生成的那个新的微任务)，此时第三个then接收的是参数类型console.log是一个函数，所以最终输出1

答案： 2 5 1

---

题目5

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

1.Promise 对象一旦创建会立即执行

• 执行resolve(1)，promise由pending的状态变为fulfilled
• 执行console.log(2)，输出2

2.碰到p.then将其加入微任务队列

3.碰到setTimeout，将其回调加入宏任务队列

4.执行console.log(4)，输出4

5.本轮宏任务全部执行完毕，检查微任务队列，发现p.then这个微任务且状态为fulfilled，执行它，输出1

6.确定微任务队列为空后，执行新的宏任务，也就是setTimeout里面的内容，输出3

答案： 2 4 1 3

---

题目6

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

1.Promise.resolve(1)返回一个状态为fulfilled的Promise对象

	Promise.resolve(1)
	// 等同
	new Promise((resolve, reject) => {
		resolve(1)
	})

2.执行then方法，接收的参数是一个函数，该函数返回2，即返回Promise.resolve(2)

	// 原题目
	Promise.resolve(1).then(res => {
		console.log(res)
		return 2
	}).then(console.log)
	// 等同
	new Promise((resolve, reject) => {
		resolve(1)
	}).then(res => {
		console.log(res)
		return Promise.resolve(2)     // return Promise.resolve(2) 等同 return new Promise((resolve, reject) => {resolve(2)})
	}).then(res => {
		console.log(res)
	})

答案： 1 2

题目6变式

	Promise.resolve(1).then(2).then(() => 3).then(4).then(console.log)		// 3
	Promise.resolve(1).then(() => Promise.resolve(2)).then(Promise.resolve(3)).then(console.log) // 2

---

题目7

	const p = new Promise((resolve, reject) => {
		throw new Error('fail')
	})
	p.then(res => console.log('res', res), err => console.log('err', err)).catch(err => console.log('catch', err))

1.then(resolveFn, rejectFn)方法接收两个参数，第一个参数是Promise状态为fulfilled的回调，第二个参数是Promise状态为rejected的回调

2.catch方法等同then(null, rejectFn)

3.throw new Error('fail')使得Promise对象的状态转为rejected，由then方法的第二个参数函数处理，此时不会走catch方法

答案： err fail

若第一个then方法不接收rejectFn进行处理，则由后续的then方法接收rejectFn处理或者catch方法处理（catch方法等同then(null, rejectFn)）

	const p = new Promise((resolve, reject) => {
		throw new Error('fail')
	})
	p.then(res => console.log('res', res)).catch(err => console.log('catch', err))
	// catch fail

---

题目8

	const p = new Promise((resolve, reject) => {
		return new Error('fail')	// 等同于 Promise.resolve(new Error('fail'))
	})
	p.then(res => console.log('res', res)).catch(err => console.log('catch', err))

注意这里是return new Error('fail')和题目7throw new Error('fail')是不同的。这里等同于 Promise.resolve(new Error('fail'))，Promise对象的状态为fulfilled

答案： res fail

---

小弟喝茶去了，后续将持续更新~~