promise 异步编程解决方案

时间：5年前阅读：6104

1、同步和异步

console.log(1);

// 定时器是异步特性

setTimeout(()=>{

console.log(3);

},3000)

console.log(2);

</script>

2、Promise对象

		<script type="text/javascript">
//			console.log('脱衣服');
//			console.log('洗衣服');
			
			let p = new Promise((resolve,reject)=>{
//				resolve表示将状态变成成功完成
//				reject 表示将状态变成失败完成
				setTimeout(()=>{
					console.log('脱完衣服啦！');
//					执行resolve()方法    表示完成
					resolve();
				},3000)
			});
//			3秒钟之后再执行p.then这个方法,因为上面的resolve();方法3秒完成
			p.then(()=>{
				console.log('promise异步操作完成了');
			})
		</script>

3、Promise传参

		<script type="text/javascript">
//			创建一个promise对象
			let p = new Promise((dd,tt)=>{
				setTimeout(()=>{
					console.log('脱完衣服啦');
//					一定要有这个状态的结束dd(),
//					(2)dd()里面传个参数3，传参用去
//					dd();
					dd(3);
				},2000)
//				p.then监控一下这个状态的结束
				
			})
//			p.then(d)接收这个参数3
			p.then((d)=>{
					console.log('去洗' +d+ '件衣服');
				})
		</script>

4、 Promise错误处理

		<script type="text/javascript">
//			创建一个promise对象
			let p = new Promise((dd,tt)=>{
				setTimeout(()=>{
//					if (顺利完成) {
//						dd(3);
//					} else{
//						tt();
//					}
					
					tt('读写失败');
					
				},2000)
//				p.then监控一下这个状态的结束
				
			})
//			p.then(d)接收这个参数3
			p.then((d)=>{
					console.log('去洗' +d+ '件衣服');
//					t这里接收第二个参数,执行的是第二个方法，不会去执行第一个方法的
				},(t)=>{
//					输出结果:遇到错误了 读写失败
					console.log('遇到错误了',t);
				})
		</script>

5、Promise.all()

		<script type="text/javascript">
			let p1 = new Promise((t,y)=>{
//				ss随机一个时间出来
				let ss = Math.floor(Math.random()*4000+1000);
				setTimeout(()=>{
					console.log('p1完成');
					t();
				},ss)
			})
			
			
			let p2 = new Promise((t,y)=>{
//				ss随机一个时间出来
				let ss = Math.floor(Math.random()*4000+1000);
				setTimeout(()=>{
					console.log('p2完成');
					t();
				},ss)
			})
			
			
			let p3 = new Promise((t,y)=>{
//				ss随机一个时间出来
				let ss = Math.floor(Math.random()*4000+1000);
				setTimeout(()=>{
					console.log('p3完成');
					t();
				},ss)
			})
			
			let p4 = new Promise((t,y)=>{
//				ss随机一个时间出来
				let ss = Math.floor(Math.random()*4000+1000);
				setTimeout(()=>{
					console.log('p4完成');
					t();
				},ss)
			})
//			Promise.all()方法,也是返回一个promise对象,只不过传进来的四个p1,p2,p3,p4对象4个都完成之后,p.then()方法才会被执行			
//			let p = new Promise.all([p1,p2,p3,p4]);
//			这里不需要加new,它不是构造函数,这是直接调用all()方法
//			监控多个promise对象执行完成
			let p = Promise.all([p1,p2,p3,p4]);
			p.then(()=>{
				console.log('全部执行完毕!');
			})
		</script>

6、async await异步函数

		<script type="text/javascript">
//			async和await是异步函数ES7的语法
//			张 三   买鸡蛋和酉红柿
			
//			李四
//			    刷锅
//			   	 准备佐料
//			   	 切菜
//			   	 炒菜
//看到上面的知道,下面李四要执行流程的话,刷锅和准备佐料可以事先做完成,但是切菜和炒菜要张三先买好菜(（完成这个步骤)买鸡蛋和酉红柿)	才能执行	   	 
//			先来一个函数x,这个函数x返回一个promise对象
			let x = ()=>{
				console.log('去买菜啦！');
				let p = new Promise((a,b)=>{
					setTimeout(()=>{
						console.log('买菜完毕！');
						a();
					},3000)
				})
				return p;
			}
//			async await是成对出现的
			let y = async ()=>{
				console.log('刷锅');
				console.log('准备佐料');
//				调用上面的x() 遇到await程序会等待当前函数(x)执行完毕,再继续执行(阻塞)
				await x();
				console.log('切菜');
				console.log('炒菜');
			}
			y();
		</script>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

promise 异步编程解决方案

网友评论