JavaScript await/async

2 篇文章 0 订阅

js中的await是一个语法糖,其内部是由then实现的,如代码{A(); await B(); C();}可以理解为{A(); B().then(()=>{ C();});}即await代码行后的逻辑为await方法的回调方法内部逻辑。需要注意的是:js是单线程的,其内部事件机制中有专门存放回调方法的微队列。异步方法的回调会存入微队列,直至当前同步方法执行完毕后才会从微队列中提取回调方法进行执行。一个异步方法(async方法)只有遇到await后才会将后面的代码逻辑追加到微队列等待执行,否则整个方法内部依旧是同步执行。

注意一个场景:如果一个内含await的异步方法连续调用多次,尽量避免在await前修改的全局变量交由await后使用,因为await后的代码会加入到微队列中,直至该方法的多次调用均执行完毕(指await前面的代码)后才会执行微队列中的回调函数(await后面的代码),此时await后的代码访问的全局变量为最后一次调用该异步方法(await前面的代码)时修改的全局变量值。也可以理解为,一个异步数据接收方法(每次调用该方法只接收完整数据的一段),其回调为数据接收完成判断,当多次接收数据并接收完全后,此时每次接收数据的完成判断都在微队列中等待,直至最后一个数据接收方法执行完毕后,所有的完成判断依次执行,但此时每个完成判断均能通过(指接收数据完全),而代码的原意本是想让接收最后一段数据的接收方法通过完成判断,因而也就导致完成事件的重复调用。由此观之,await前后的代码应当极力避免使用同一个公共变量,否则容易产生数据覆盖。

await如果嵌套使用,很容易造成逻辑上的混乱,很难分清某段代码是同步还是异步执行。当await嵌套时,处理逻辑如下:

  1.1 进入方法,从上到下同步执行

  1.2 遇到await时,如果await的方法是系统级api(如ajax等)跳转到1.4,否则进入await指向的方法,跳转到1.1,没遇到await到1.3

  1.3 如果此方法没有await,则继续同步执行此方法直至完成。跳转到1.5

  1.4 如果遇到系统级api,则进入异步等待。异步等待结束后再跳转到1.6

  1.5 出栈回到上层调用,如果有await代码行,跳转到1.6,如果没有,跳转到1.8

  1.6 将await代码行后面的代码(其实就是回调函数)加入微队列,跳转到1.7

  1.7 回调方法在微队列中排队等待调用,执行完毕后跳转到1.5

  1.8 执行完毕

从上面执行流程可以看出,与C#不同,多层代码嵌套时,每层await后面的代码均需要加入到微队列,而且不是同时加入,而是底层加入到微队列,等待排队并执行完毕后再将上一层加入到微队列继续排队,如此循环往复。具体代码样例如下图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值