JavaScript await/async

本文解释了JavaScript中的await关键字如何工作,它是如何通过then实现的,以及在单线程环境中异步方法的回调机制。特别强调了避免在await前后共享全局变量的重要性,以及嵌套await带来的逻辑复杂性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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后面的代码均需要加入到微队列,而且不是同时加入,而是底层加入到微队列,等待排队并执行完毕后再将上一层加入到微队列继续排队,如此循环往复。具体代码样例如下图:
在这里插入图片描述

<< 在 JavaScript 中,`async/await` 是一种处理异步操作的方式,它可以让我们用同步的思维去编写异步代码,从而让代码更加清晰易读。尽管 `async/await` 并不会直接提升代码执行的速度(因为它的本质仍然是基于 Promise),但它可以通过优化逻辑结构和减少回调嵌套来间接提高程序的可维护性和潜在性能。 ### 如何使用 `await/async` 重构代码 假设我们有一段使用传统 `.then()` 链式调用的代码: ```javascript function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => resolve("Data"), 1000); }); } fetchData() .then(data => console.log(data)) .catch(err => console.error(err)); ``` 我们可以将其改写为以下形式: ```javascript async function fetchDataAsync() { const data = await new Promise(resolve => setTimeout(() => resolve("Data"), 1000) ); console.log(data); // 输出 "Data" } fetchDataAsync(); ``` #### 性能相关的几点分析: 1. **代码更简洁**:虽然 `async/await` 和 Promises 在底层本质上是一样的,但前者减少了大量的嵌套代码,使得开发者更容易理解和调试。 2. **错误处理更直观**:传统的`.then/.catch`模式可能需要单独处理每个Promise链中的异常情况,而使用`try...catch`结合`await`可以让错误捕获变得更集中、自然。 3. **并发控制灵活**:如果你希望多个请求同时发起并且等待所有结果返回时,可以用`Promise.all([...])`, 结合 async 函数会非常方便地管理这些任务。 需要注意的是,在某些情况下过度依赖于 `await` 可能会导致不必要的阻塞行为,尤其是当你可以并行运行的任务被串行化了的时候。所以要合理选择是否应该立即等待某个异步过程完成再继续下一步。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值