ES6——Promise代码分析

59 阅读1分钟

案例代码:

<script type="text/javascript">
		setTimeout(()=>{
			console.log(0);
		});
		new Promise(resolve=>{
			console.log(1);
			setTimeout(()=>{
				resolve();
				var p1=new Promise((n1,n2)=>{(20)})
				p1.then(()=>console.log(2));
				console.log(3)
			});
			new Promise((n1,n2)=>{n1(20)}).then(()=>console.log(4));
		}).then(()=>{
			console.log(5);
			var p2=new Promise((n1,n2)=>{n1(20)})
			p2.then(()=>console.log(8));
			setTimeout(()=>console.log(6))
		});
		console.log(7);
	</script>

案例分析:

提示:异步任务的队列优先级:异步宏任务先执行,然后再执行异步微任务

		在script标签脚本中,script是一个宏任务。
		代码的执行顺序是:
		1.在script宏任务中,先执行同步任务:
		new Promise(console.log(1);new Promise((n1,n2)=>{n1(20)}));//1
		console.log(7);//7
		2.然后执行这个宏任务中的微任务即:
		new Promise().then()
		2.1然后再执行new Promise()里的微任务
		new Promise((n1,n2)=>{n1(20)}).then(()=>console.log(4));//4
		4.再执行下一个宏任务:
		setTimeout(()=>{
			console.log(0);//0
		});
		5.在script的宏任务执行完毕后,再执行new Promise()里面的宏任务
		setTimeout(()=>{
			resolve();
			var p1=new Promise((n1,n2)=>{(20)})//注意这里没有用n1()或n2()去触发p1.then(()=>console.log(2)),所以下面这行代码没有运行
			p1.then(()=>console.log(2));
			console.log(3)//3
		});
		6.因为new Promise().then()里的代码运行需要resolve()触发。所以new Promise().then()里的代码在执行setTimeout(()=>{
				resolve();
				var p1=new Promise((n1,n2)=>{(20)})
				p1.then(()=>console.log(2));
				console.log(3)
			})完毕后再执行
			6.1同步
			console.log(5);
			var p2=new Promise((n1,n2)=>{n1(20)})
			6.2异步微任务
			p2.then(()=>console.log(8));
			7.在继续执行下一个宏任务
			setTimeout(()=>console.log(6))

答案:

image.png