ES6 Promise练习题

最新推荐文章于 2024-03-16 17:35:40 发布

龙飞雨

最新推荐文章于 2024-03-16 17:35:40 发布

阅读量230

点赞数

分类专栏： javascript 文章标签： Promise

本文链接：https://blog.csdn.net/u011975949/article/details/114842551

版权

本文解析了关于ES6 Promise的基础题目，涉及Promise的状态转换、链式调用、错误处理等概念。并通过编程题深入理解Promise在异步流程控制中的应用，如模拟红绿黄灯交替、控制并发下载图片等。

摘要由CSDN通过智能技术生成

基础题
01

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

解析：
Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的。

const first = () => (new Promise((resolve, reject) => {
	console.log(3);
	let p = new Promise((resolve, reject) => {
		console.log(7);
		setTimeout(() => {
			console.log(5);
			resolve(6);
		}, 0)
		resolve(1);
	});
	resolve(2);
	p.then((arg) => {
		console.log(arg);
	});
}));

first().then((arg) => {
	console.log(arg);
});
console.log(4);
运行结果
// => 3
// => 7
// => 4
// => 1
// => 2
// => 5

解析：

这道题主要理解js执行机制。

第一轮事件循环，先执行宏任务，主script，new Promise立即执行，输出 3，执行p这个new Promise操作，输出 7，发现setTimeout，将回调函数放入下一轮任务队列（Event Quene），p的then，暂且命名为then1，放入微任务队列，且first也有then，命名为then2，放入微任务队列。执行console.log(4),输出 4，宏任务执行结束。

再执行微任务，执行then1,输出 1，执行then2,输出 3.

第一轮事件循环结束，开始执行第二轮。第二轮事件循环先执行宏任务里面的，也就是setTimeout的回调，输出 5.resolve(6)不会生效，因为p的Promise状态一旦改变就不会再变化了。

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)
运行结果
promise1 Promise {<pending>}
promise2 Promise {<pending>}
Uncaught (in promise) Error: error!!!
	at <anonymous>
promise1 Promise {<resolved>: "success"}
promise2 Promise {<rejected>: Error: error!!!
	at <anonymous>}

解释：
promise 有 3 种状态：pending、fulfilled 或 rejected。状态改变只能是 pending->fulfilled 或者 pending->rejected，状态一旦改变则不能再变。上面 promise2 并不是 promise1，而是返回的一个新的 Promise 实例。

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
<