博主精心准备，全面了解Es6中的异步编程，本文讲的是最常用的，理解起来还是很容易的
所以异步，就是当你发送请求之后，不是及时返回的，需要过一段时间才会返回，例如查询信息很多，查询慢，就需要等待
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> |
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> |
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> |
「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」
上一篇：酷狗音乐实战（Vue-Cli）
下一篇：在移动端中的flex布局
国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..
博主独立研发主题：
没咋研究，emmm
评：web前端绘制八卦图_超简单教程这个是太极阴阳鱼，不是八卦图。
评：web前端绘制八卦图_超简单教程
后会有期（1年前 (2020-08-14)）文章不错
评：宝塔系统面板无法正常显示我采用该方法解决了才发布的教程
评：iview-admin点击路由报错vue-router.esm.js?8c4f:2007 Uncaught (in promise) NavigationDuplicated {_name: "Navi网站被攻击了，有些源码文件损坏了
评：前端搜索框下方保留搜索记录
12（2年前 (2020-03-11)）为什么我的foreach会报错 Error in v-on handler: "TypeE...
评：iview中多选框单选实现方法
共 0 条评论关于"ECMAScript异步编程详解"
最新评论