一文读懂异步和同步——async/await在运行时和普通代码的执行顺序的问题

这篇具有很好参考价值的文章主要介绍了一文读懂异步和同步——async/await在运行时和普通代码的执行顺序的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、执行顺序问题

JavaScript中的await语句是异步编程中用于等待Promise对象执行结果的关键字,它通常与async函数一起使用。在使用await关键字时,程序的执行将暂停,直到该关键字后面的Promise对象完成执行并返回结果。

函数代码执行顺序通常情况下按照代码所在文件从上至下的顺序执行,在执行到遇到异步操作时,会将该异步操作放入事件循环中,继续执行下面的同步代码,等异步操作结束后再执行回调函数或执行then方法所传入的回调函数。

JavaScript中的await语句是异步编程中用于等待Promise对象执行结果的关键字,它通常与async函数一起使用。在使用await关键字时,程序的执行将暂停,直到该关键字后面的Promise对象完成执行并返回结果。

函数代码执行顺序通常情况下按照代码所在文件从上至下的顺序执行,在执行到遇到异步操作时,会将该异步操作放入事件循环中,继续执行下面的同步代码,等异步操作结束后再执行回调函数或执行then方法所传入的回调函数。

举个例子:

async function test() {
   console.log("start...")
   await fetch('https://myapi.com/data') // 网络请求,会阻塞当前线程
   console.log("end...")
}
test()
console.log("other code...")

执行结果为:

start...
other code...
end...

在代码执行过程中,先输出了"start..."和"other code...",说明异步代码的执行并没有阻塞其他同步代码的运行。直到异步代码中的网络请求完成之后,才会执行await之后的代码,输出"end..."。

需要注意的是,await只能在async函数中使用,而且如果await后面的Promise对象被reject了,那么await将抛出异常,因此建议在使用await时需要添加try-catch语句来处理异常情况。

再举个例子:

async await执行顺序,javascript,前端,vue.js

 

再看一道经典面试题: 

async await执行顺序,javascript,前端,vue.js

 

执行顺序为ADCB  而不是 ADBC  为什么: 

首先因为两个语句都是宏任务,没有微任务,所以两个优先级看起来是一样的,但是因为C的回调函数的延时时间为0因此其会作为异步任务(耗时任务)的第一个执行对象!!

二、JS任务详解

async await执行顺序,javascript,前端,vue.js

同步任务就是普通的代码 非耗时任务  

异步任务则还分为两种:


 async await执行顺序,javascript,前端,vue.js

其中宏任务里往往很多都是用微任务代码写的        

 每次执行完一个宏任务都会判断有没有微任务待执行,如果有,那么就先执行微任务再继续下一个宏任务

async await执行顺序,javascript,前端,vue.js

 

又一道经典面试题:

async await执行顺序,javascript,前端,vue.js

async await执行顺序,javascript,前端,vue.js

 一开始看可能会觉得和上面那道面试题冲突了,其实不然 ,

因为我们要搞清楚thenFs.readFile().then()是宏任务还是微任务,结果其实我们理想的不一样,他和Promise().then()不一样,Promise().then()是微任务,而thenFs.readFile().then()是宏任务!!!

因此前面的面试题:async await执行顺序,javascript,前端,vue.js

 

的执行结果为ADCB 而不是ADBC  因为他们两都是宏任务,又因为setTimeout的timeout为0 所以就先执行thenFs.then()了!!!文章来源地址https://www.toymoban.com/news/detail-778762.html

到了这里,关于一文读懂异步和同步——async/await在运行时和普通代码的执行顺序的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】浅谈async/await异步传染性

    \\\"异步传染性\\\"问题通常是指,当一个函数使用了async和await,其调用者也需要使用async和await处理异步操作,导致整个调用链都变成异步的。这种情况可能导致代码变得更复杂,不易维护。 类似于C# try catch的层层上抛,在某一层catch 查了很多资料 ,对于这个问题说法还都不一样

    2024年01月23日
    浏览(45)
  • HarmonyOS通过async与await同异步转换 解决异步回调地狱

    我在 HarmonyOS 发送http网络请求 中讲述了 HTTP请求的基本方式 然后 就带出了 回调地狱的问题 然后 上文 HarmonyOS 通过Promise 解决异步回调地狱问题 我们用Promise的解决方案 搞定了 这个问题 但是 Promise 这种写法 可读性其实没有那么优秀 没有搞定 Promise return规则的人甚至都看不懂

    2024年01月24日
    浏览(48)
  • 消灭异步回调,还得是 async-await

    关于异步处理问题,ES5的回调让我们陷入回调地狱轮回,后来ES6的Promise(Promise不了解?点这了解[1])让我们脱离轮回,终于,ES7的async-await带我们走向光明。今天我们就来学习一夏 async-await,看看与Promise有何联系和区别。 一、走进Async-await原理 1、原理1 async函数返回一个

    2024年02月10日
    浏览(52)
  • C#异步方法async/await的三种返回类型

    有群友问C#异步方法async返回值Task和void的区别?看似简单,但不容易把它们用好。在C#中的异步编程已经成为现代编程的标配,异步方法(async/await)是实现异步编程的一种常用方式。在异步方法中,可以使用 Task 或 void 作为返回类型,还可以使用ValueTask返回类型。本文将介绍

    2024年02月04日
    浏览(49)
  • 异步编程的概念 以及async和await的工作原理

    一、引言 二、异步编程的基本概念 三、基于任务的异步模式(TAP) 四、async和await async的工作原理: await的工作原理: 五、异步方法的编写和调用 六、异常处理 七、取消异步操作 八、性能考虑 九、案例:异步下载文件 十、结论 在.NET中,异步编程是一

    2024年04月16日
    浏览(43)
  • 前端面试:【异步编程】Callback、Promise和Async/Await

    嗨,亲爱的JavaScript探险家!在JavaScript开发的旅程中,你会经常遇到异步编程的需求。为了处理异步操作,JavaScript提供了多种机制,包括Callbacks、Promises和Async/Await。本文将深入介绍这些机制,让你能够更好地处理异步任务。 1. Callbacks:传统的异步方式 Callbacks是JavaScript中最早

    2024年02月11日
    浏览(85)
  • 前端异步编程全套:xmlhttprequest > ajax > promise > async/await

    同步与异步区别 同步:按顺序,依次执行,向服务器发送请求--客户端做其他操作 异步:分别执行,向服务器发送请求==同时执行其他操作 原生xmlhttprequest 四步骤 创建ajax对象 设定数据的传输方式(get、post),打开连接open() 获得响应数据 属性 描述 onreadystatechange 当readysta

    2024年02月01日
    浏览(71)
  • Unity 中的 async/await:优雅处理异步任务与协程

    内容将会持续更新,有错误的地方欢迎指正,谢谢!   Unity 中的 async/await:优雅处理异步任务与协程Coroutine       TechX 坚持将创新的科技带给世界! 拥有更好的学习体验 —— 不断努力,不断进步,不断探索 TechX —— 心探索、心进取! 助力快速掌握 async/await 异步等待 为初

    2024年02月06日
    浏览(51)
  • 深入理解Async/Await:从原理到实践的JavaScript异步编程指南

    理解 async/await 的原理和使用方法是理解现代JavaScript异步编程的关键。这里我会提供一个详细的实例,涵盖原理、流程、使用方法以及一些注意事项。代码注释会尽量详尽,确保你理解每个步骤。 实例:使用async/await进行异步操作 详细解释和注释: 异步函数定义: async func

    2024年02月05日
    浏览(65)
  • 详解async 与 await,带您理解Playwright使用异步方法的正确姿势!

    大家在使用python做playwright自动化测试的过程中,一定会发现下面这种异步用法 很多同学可能只是按照这种写法来编写项目的自动化测试代码,对于具体细节可能并不了解,今天我就来讲一下playwright异步用法的相关技术细节。建议大家拷贝文档中的脚本实际运行一下,学习的

    2024年02月12日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包