没有合适的资源?快使用搜索试试~ 我知道了~
20-asyncawait:使用同步的方式去写异步代码_For_vip_user_0011
需积分: 0 0 下载量 154 浏览量
2022-08-04
15:06:35
上传
评论
收藏 643KB PDF 举报
温馨提示
试读
9页
1. 在成器函数内部执段代码,如果遇到yield关键字,那么JavaScript引擎将返回关键字后的内容 2. 外部函数可以通过next法恢复函数的执 1.
资源详情
资源评论
资源推荐
20-asyncawait:使⽤同步的⽅式去写异步代码20-asyncawait:使⽤同步的⽅式去写异步代码
在上篇⽂章中,我们介绍了怎么使⽤Promise来实现回调操作,使⽤Promise能很好地解决回调地狱的问
题,但是这种⽅式充满了Promise的then()⽅法,如果处理流程⽐较复杂的话,那么整段代码将充斥着
then,语义化不明显,代码不能很好地表⽰执⾏流程。
⽐如下⾯这样⼀个实际的使⽤场景:我先请求极客邦的内容,等返回信息之后,我再请求极客邦的另外⼀个
资源。下⾯代码展⽰的是使⽤fetch来实现这样的需求,fetch被定义在window对象中,可以⽤它来发起对
远程资源的请求,该⽅法返回的是⼀个Promise对象,这和我们上篇⽂章中讲的XFetch很像,只不过fetch
是浏览器原⽣⽀持的,并有没利⽤XMLHttpRequest来封装。
从这段Promise代码可以看出来,使⽤promise.then也是相当复杂,虽然整个请求流程已经线性化了,但是
代码⾥⾯包含了⼤量的then函数,使得代码依然不是太容易阅读。基于这个原因,ES7引⼊了基于这个原因,ES7引⼊了
async/await,这是JavaScript异步编程的⼀个重⼤改进,提供了在不阻塞主线程的情况下使⽤同步代码async/await,这是JavaScript异步编程的⼀个重⼤改进,提供了在不阻塞主线程的情况下使⽤同步代码
实现异步访问资源的能⼒,并且使得代码逻辑更加清晰实现异步访问资源的能⼒,并且使得代码逻辑更加清晰。你可以参考下⾯这段代码:
通过上⾯代码,你会发现整个异步处理的逻辑都是使⽤同步代码的⽅式来实现的,⽽且还⽀持trycatch来捕
获异常,这就是完全在写同步代码,所以是⾮常符合⼈的线性思维的。但是很多⼈都习惯了异步回调的编程
思维,对于这种采⽤同步代码实现异步逻辑的⽅式,还需要⼀个转换的过程,因为这中间隐藏了⼀些容易让
⼈迷惑的细节。
那么本篇⽂章我们继续深⼊,看看JavaScript引擎是如何实现async/await的。如果上来直接介绍
async/await的使⽤⽅式的话,那么你可能会有点懵,所以我们就从其最底层的技术点⼀步步往上讲解,从
⽽带你彻底弄清楚async和await到底是怎么⼯作的。
fetch('https://www.geekbang.org')
.then((response)=>{
console.log(response)
returnfetch('https://www.geekbang.org/test')
}).then((response)=>{
console.log(response)
}).catch((error)=>{
console.log(error)
})
asyncfunctionfoo(){
try{
letresponse1=awaitfetch('https://www.geekbang.org')
console.log('response1')
console.log(response1)
letresponse2=awaitfetch('https://www.geekbang.org/test')
console.log('response2')
console.log(response2)
}catch(err){
console.error(err)
}
}
foo()
艾斯·歪
- 粉丝: 33
- 资源: 343
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0