博主精心准备,全面了解Es6中的异步编程,本文讲的是最常用的,理解起来还是很容易的
ECMAScript异步编程详解
所以异步,就是当你发送请求之后,不是及时返回的,需要过一段时间才会返回,例如查询信息很多,查询慢,就需要等待
Promise其他方法与Async-await
Promise中的all方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //all就是全部的意思,这里表示的就是,只有当前面的任务全部都执行完毕了,才能执行all里面的东西 <script type="text/javascript"> let p1 = new Promise((resolve,reject) => { setTimeout(()=>{ console.log(1); resolve(10); //返回成功 },3000) }); let p2 = new Promise((resolve,reject) => { setTimeout(()=>{ console.log(2); resolve(20); //返回成功 },3000) }); //这里表示的是只有当前面的任务都完成了,才能执行下面的函数,all中存放的就是需要执行的函数 Promise.all([p1,p2]).then(arr => { console.log(3,arr); //arr中存放的其实就是前面两个异步方法传入过来的值 打印结果为3 [10,20] }) </script> |
Promise中的race方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript"> let p1 = new Promise((resolve,reject) => { setTimeout(()=>{ console.log(1); resolve(10); //返回成功 },3000) }); let p2 = new Promise((resolve,reject) => { setTimeout(()=>{ console.log(2); resolve(20); //返回成功 },3000) }); //这里表示的是存放的任务,只要有一个完成了,就能执行下面的函数,race中存放的就是需要执行的函数 Promise.race([p1,p2]).then(arr => { console.log(3,arr); //arr中存放的其实就是前面两个异步方法传入过来的值 打印结果为3 10 }) </script> |
直接调用之后返回成功或者失败
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> //直接调用之后返回成功或者失败 Promise.resolve().then(() =>{ console.log(1) },()=>{ console.log(2) }) //失败 Promise.reject().then(() =>{ console.log(1) },()=>{ console.log(2) }) </script> |
通过改变resolve中返回的东西来改变为失败
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> /*resolve()中传入的值就是then方法中传入的值, 我们是可以通过改变resolve()中的值来达到返回正确还是错误的, 下面的就是成功改成了失败 */ Promise.resolve(new Promise((resolve,reject)=>{ reject('错误'); })).then(v =>{ console.log(v) },err=>{ console.log(err) }) </script> |
异步的最终解决方案(目前最好的方案)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <script type="text/javascript"> fn(); //必须添加async为异步函数,否则会报错 async function fn(){ //这里的v获取到的就是返回值 try{ //异步需要添加await var v = await getvalue(10) console.log(v); var w = await getvalue(20) console.log(w); var z = await getvalue(21000) console.log(z); }catch(err){ console.log(err); } } function getvalue(val){ return new Promise((resolve,reject)=>{ setTimeout(() => { var a = 10; //写入逻辑判断正确和错误 if(val<100){ resolve(10*val); }else{ reject('传入的值不能超过100哦'); } },2000) }) } </script> |
7