ES7前端异步玩法:async/await理解
java1234
共 2766字,需浏览 6分钟
· 2021-11-27
点击上方蓝色字体,选择“标星公众号”
优质文章,第一时间送达
什么是async、await?
1 async function testSync() {
2 const response = await new Promise(resolve => {
3 setTimeout(() => {
4 resolve("async await test...");
5 }, 1000);
6 });
7 console.log(response);
8 }
9 testSync();//async await test...
async、await串行并行处理
串行:等待前面一个await执行后接着执行下一个await,以此类推
1 async function asyncAwaitFn(str) {
2 return await new Promise((resolve, reject) => {
3 setTimeout(() => {
4 resolve(str)
5 }, 1000);
6 })
7 }
8
9 const serialFn = async () => { //串行执行
10
11 console.time('serialFn')
12 console.log(await asyncAwaitFn('string 1'));
13 console.log(await asyncAwaitFn('string 2'));
14 console.timeEnd('serialFn')
15 }
16
17 serialFn();
并行:将多个promise直接发起请求(先执行async所在函数),然后再进行await操作。
1 async function asyncAwaitFn(str) {
2 return await new Promise((resolve, reject) => {
3 setTimeout(() => {
4 resolve(str)
5 }, 1000);
6 })
7 }
8 const parallel = async () => { //并行执行
9 console.time('parallel')
10 const parallelOne = asyncAwaitFn('string 1');
11 const parallelTwo = asyncAwaitFn('string 2')
12
13 //直接打印
14 console.log(await parallelOne)
15 console.log(await parallelTwo)
16
17 console.timeEnd('parallel')
18
19
20 }
21 parallel()
async、await错误处理
1 async function catchErr() {
2 try {
3 const errRes = await new Promise((resolve, reject) => {
4 setTimeout(() => {
5 reject("http error...");
6 }, 1000);
7 );
8 //平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功
9 // console.log(errRes.status, errRes.statusText);
10 } catch(err) {
11 console.log(err);
12 }
13 }
14 catchErr(); //http error...
作者 | 割肉机
来源 | cnblogs.com/williamjie/p/9789212.html
评论
架构应该如何来理解?
来源:zhuanlan.zhihu.com/p/141027477👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:htt
小哈学Java
0
只写后台管理的前端要怎么提升自己
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群本人写了五年的后台管理。每次面试前就会头疼,因为写的页面除了表单就是表格。抱怨过苦恼过也后悔过(虽然我现在已经心安理得的摆烂),但是站在现在的时间点
程序员成长指北
1
三年前端还不会配置Nginx,被老板打了,今天一口气学完
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群引言先来看看为何需要做请求负载。 早期的业务都是基于单体节点部署,由于前期访问流量不大,因此单体结构也可满足需求,但随着业务
程序员成长指北
4
面试了一个字节出来的前端女生,她太太太厉害了
最近有个老同学进了某大厂—— 高级前端工程师,拿了45K*16薪!马上找他要来了几套高质量内部资料。既是高频真题,也是一套前端进阶学习宝典。几乎满足各级前端工程师的需求,内容涵盖了Html、Css、Javascript、vue、React、小程序、算法等等。实战代码清晰,解析也十分全面。足足有15套
java团长
0
你真的理解 devDependencies 和 dependencies 的区别吗?
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群作者:井柏然原文:https://juejin.cn/post/7135795969370619918你是否真的理解 devDependencies 和 dependencies 的区别?如果不能确切的回答、理解还停留在模糊的阶段,
前端Q
0
分享几个前端中好玩且有用的开源工具,总有一个适合你!
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群正所谓差生文具多,作为前端的我们,拥有几个合适的工具和网站可以很有效的提高我们的工具效率,还会有一些很有趣的网站可以在我们敲 bug 累了的时候供我们娱乐,接下来我就和大嘎分析一下我在用的一些工具和网站。聚合API该网站提供了大量的
前端Q
0
前端框架新势力大盘点
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群近年来,前端领域快速发展,新的框架不断涌现,为开发者提供了更多选择和解决方案。尽管 React、Vue、Angular、Next.js、Preact 等老牌框架依然稳坐市场主流,但新势力前端框架的崛起也为特定场景带来了更佳的适配和优
前端Q
0
【Vuejs】2023- Vue3 项目前端 CI/CD 体验
作者:PAXTONX1. 环境准备➜ app-cicd node --versionv18.0.0➜ app-cicd npm --version9.6.62. 安装2.1 初始化选项项目初始化选择。➜ &
前端自习课
10