对 async/await 的理解,分析内部原理

最新推荐文章于 2024-04-19 20:26:02 发布
最新推荐文章于 2024-04-19 20:26:02 发布
阅读量898 收藏 3
点赞数 1
分类专栏： 大前端 文章标签： javascript generator es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40599109/article/details/108622019
版权
本文探讨了JavaScript中的异步模式发展，从回调函数、Promise到generator/yield，最终聚焦于async/await。async/await作为generator的语法糖，解决了回调地狱问题，同时简化了异步代码的阅读和编写。它内部基于Promise，但允许在async函数中使用await，使得错误处理更加直观。需要注意的是，await只能在async函数中使用，且一个async函数中如有await出现错误，后续await将不再执行，可通过try/catch进行异常处理。
摘要由CSDN通过智能技术生成
js的异步模式从回调函数-＞Promise-＞generator/yield-＞async/await

回调函数和Promise都有回调地狱的问题,代码不利于阅。generator/yield虽然解决了回调地狱的问题,但是需要开发者自己写迭代器的逻辑。
而async/await即解决了回调地狱的问题,同时将 Generator 函数和自动执行器,封装在一个函数中,它其实就是generator的语法糖。只是开发者不用再关心内部复杂的实现逻辑

注意点:

  1. await命令只能用在async函数之中,如果用在普通函数,会报错
  2. async函数的返回值是 Promise 对象更方便使用
    当 async 函数中只要一个 await 出现 reject 状态,则后面的 await 都不会被执行,可以添加 try/catch来捕获异常

原理:

async/await会被编译成generator+promise的语法代码

   async function fn() {
   
   // ...
   ｝

等价于

  function fn() {
   
   return
最低0.47元/天 解锁文章
大唐荣华
关注
专栏目录
详细介绍async await 含义,使用,原理
weixin_43730446的博客
03-02 670
async 函数 就是将 Generator 函数的星号（*）替换成 async,将 yield 换成await
async/await 实现原理探析
m0_48474585的博客
04-16 470
async/await 实现原理探析 ES2017 提供的 Async/Await 是标准的异步编程语法，作为异步编程终极解决方案，可以使开发者使用书写同步代码的方式处理异步编程，本文尝试将 Async/Await 编译成为 ES5 的代码后，去理解其内部实现。 代码 const getData = () => new Promise(resolve => setTimeout(() => resolve("data"), 1000)) async function test() {
对 async/await 的理解，分析内部原理
Baron的技术blog
09-07 911
Promise 的出现解决了回调地狱的问题，但是如果遇到复杂的业务，代码中会包含大量的 then 函数，使得代码依然不容易阅读。 基于这个原因，在 ES7 中引入了 async/await，这是 JavaScript 异步编程的一个重大改进。它提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰，而且还支持 try-catch 来捕获异常，非常符合人的线性思维。 Async/await，这种方式能够彻底告别执行器和生成器，实现更加直观简洁的代码。根据 MDN 定义，asy
Async和Await异步编程的原理
热门推荐
萌萌的It人 www.itmmd.com
07-18 3万+
1. 简介  从4.0版本开始.NET引入并行编程库，用户能够通过这个库快捷的开发并行计算和并行任务处理的程序。在4.5版本中.NET又引入了Async和Await两个新的关键字，在语言层面对并行编程给予进一步的支持，使得用户能以一种简洁直观的方式实现并行编程。因为在很多文档里针对Async和Await这两个关键字的使用都被称为异步编程，为了更符合大众的阅读习惯，我们使用异步编程这个叫法，意思上
对于async和await的理解
张峰的博客
08-29 818
直接先上代码 [HttpGet] public async Task<ActionResult<IEnumerable<string>>> GetAsync() { try { logger.LogInformation(Thread.Curre...
async await用法及原理总结
qq_44818085的博客
11-09 1万+
1.Async Await 原理（注：await 只能出现在 async 函数中） 当调用一个 async 函数时，会返回一个 Promise 对象 (关键) async 函数中可能会有 await 表达式，await表达式 会使 async 函数暂停执行，直到表达式中的Promise解析完成后继续执行 async 中 await 后面的代码并返回解决结果。 既然返回的是Promise 对象，所以在最外层不能直接获取其返回值，那么肯定可以用原来的方式：then() 链来处理这个 Promise 对象 原
深入理解JavaScript的async/await
10-18
异步编程是现代JavaScript中不可或...不过，在使用它们之前，需要对Promise有深刻的理解，因为async/await的实现基础就是Promise。掌握async/await的使用方法和最佳实践对于编写高效、可维护的JavaScript代码至关重要。
异步Promise及Async/Await详解
qq_15859173的博客
12-21 748
一、为什么有Async/Await？ 我们都知道已经有了Promise的解决方案了，为什么还要ES7提出新的Async/Await标准呢？ 答案其实也显而易见：Promise虽然跳出了异步嵌套的怪圈，用链式表达更加清晰，但是我们也发现如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况。 首先，我们必须了解Promise。 二、Promise简介 2.1 Promise实例 什么是Promise，很多人应该
js代码-async/await的调用
07-16
在`main.js`文件中，很可能包含了使用`async/await`处理异步操作的示例代码，通过阅读和分析这个文件，可以更深入地理解`async/await`的实践应用。而`README.txt`文件可能提供了关于这些代码的解释和使用说明。 ...
async-await的原理和使用
庚中
06-19 4619
总结：其实前面加了async的函数,当我在这个函数调用的时候进行打印发现它输出的是一个promise对象,其实这个函数的本质就是返回了一个promise对象,在这个函数里里我们加上await后,即使调用的是异步代码,它也会变成类似于同步,只有让这个异步代码执行完后,才会执行下面的同步代码来执行，这就是它的本质。 <!DOCTYPE html> <html lang="en"&gt...
async await 原理吸收
weixin_30879169的博客
05-14 70
https://www.jianshu.com/p/862ab6d1a2f6 转载于:https://www.cnblogs.com/liaolongfei/p/10862178.html
await原理
m0_46073357的博客
04-30 657
async 与 await的原理 async 默认返回的就是一个Promise对象 async function a() { console.log('a') return 'aaaaa' } console.log(a()) // Promise {<fulfilled>: "aaaaa"} await的原理（用promise的then方法还原） const p = new Promise((resolve, reject) => { setTimeout(() =
Async、Await 实现原理
左手121
03-20 2837
Async、Await 实现原理 简介 async 用于声明一个函数是异步的 await 用于等待异步完成 await 只能在 async 函数中使用 async 返回一个 promise await 后边永远跟的是一个 promise，如果是一个非 promise，则会自动转换为 promise Async、Await 是通过 Generator + Promise 实现 babel 转码 ...
Await,ASync原理最暴力解读
区块链斜杠青年(爱踢门)
04-14 6355
Await和Async其实就是promise的封装，使用编译技术自动将Await/Async转化为promise,为了更好的理解Await,Async是什么？我们使用转换工具来分析 async/await转换工具安装 $ sudo npm install babel-plugin-async-to-promises -g $ babel --plugins async-to-promises as...
理解async和await
awn80645的博客
01-14 727
async 是“异步”的简写，而 await 可以认为是 async wait 的简写。 所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。 async 函数是什么？一句话，它就是 Generator 函数的语法糖。async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成a...
JS异步编程（async、await详解）
2401_84092483的博客
04-13 345
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
JavaScript中async和await的实现原理
simple_Xsg的博客
04-25 3333
由于js是单线程的执行模型，因此为了提高效率就有了异步编程，单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。 但是我们也需要类似多线程机制的这种执行方式，我们需要异步执行编程，异步执行编程会使得多个任务并发执行。 异步编程可以实现多任务并发执行，指同一时刻内多任务同时进行，边煮饭，边烧水，可以同时进行，进而提高效率。
【JavaScript】异步函数(async和await详解)
最新发布
Jerryqjr的博客
04-19 4465
来源于红宝书，详解异步函数
Promise Async/await 原理解析与实战示例
"Promise Async+await实现原理及案例分析" 在JavaScript的世界里，异步编程是不可或缺的一部分，而Promise和Async/await就是其中两种强大的工具，它们帮助开发者处理复杂的异步流程，使得代码更加清晰和易于理解。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值