promise 异步编程解决方案
1、同步和异步
<!--promise 异步编程解决方案-->
<!--异步:几件事可以同时做的就叫异步-->
<!--同步编程-->
<!--同步:一件事没干完后面的事就得等着-->
<script type="text/javascript">
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,我们将及时处理。
微信扫码关注
更新实时通知