关于async await 等任务队列插话

最新推荐文章于 2023-05-29 12:06:38 发布
最新推荐文章于 2023-05-29 12:06:38 发布
阅读量213 收藏
点赞数
分类专栏： async awiat js 文章标签： 队列 javascript node.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42781818/article/details/116424048
版权
本文详细探讨了JavaScript中的异步操作，通过一个代码示例解释了async/await的执行顺序，涉及到宏任务、微任务的概念，以及setTimeout和Promise在执行流程中的角色。理解这些概念对于优化JavaScript代码和提升程序性能至关重要。
摘要由CSDN通过智能技术生成

关于async await 等任务队列插话

先上代码吧

在这里插入图片描述
大佬们不妨先猜一下执行顺序：
根据从上而下执行顺序
第一步：执行test( ) 调用test
打印出 ‘test start…’
然后继续往下执行 调用testSometing
打印出 ‘执行testSometing’
await 跳出当前堆栈
继续往下走吧。。。
执行promise 打印出’promise start…’
promise.then属于微任务 咱先放起来
然后再往下执行 ‘test end…’
好了 第一次调用堆栈执行玩咯
第二步：根据顺序该咱刚刚 的 await咯
然后打印出v1 testSometing’;
然后往下走 调用testAaync
打印出 ‘执行testAsync’
await 跳出当前堆栈（等会儿记得回来哦）
然后执行刚才那个微任务(快点啊，怎么还不来？)
打印出 ‘promise’;
好了 第二波儿执行堆栈完事儿了 （这就完事儿了？？）
第三步 别忘了还有await小妹妹等着呐
继续走吧，总不能丢下人家不管吧 打印出V2 ’hello async‘;
然后再执行最后的 打印 ’testSometing hello async‘；（哎哟，累了）

升下级吧

在这里插入图片描述
怎么了？？换了个小姐姐就慌了？？尽管人家比上一个性感，额么么，扯远了

  1. 第一步 傻了？？从上往下走呗，打印出 ‘script start’;
    遇到setTimeout了 这是宏任务 先放起来 这丈母娘不好对付呀 先绕开她
    执行async1 打印 ’async1 start‘还有’await 之前’;
    继续往下啊
    执行 async2 打印‘async2’ ，别走啊哥哥，Promise同步代码啊
    打印出’2222222’
    奶奶的，又await 跳出来 当前在async1函数小姐姐家里
    async1前面也有await 再跳出来（让我多待一会儿不行？吃醋了？）
    继续往下走 执行Promise 打印‘promise1;遇到.then 微任务 放起来
    打印’script end‘
    第一次完事儿了（3秒真男人）
  2. 第二步 根据从上而下 咱刚刚的await 继续走 嗯？？啊 这
    返回了Promise对象啊 await相当于执行.then啊 .then属于啥来着？ 微任务啊 放起来
    然后执行下一个微任务 打印出’promise2’
    执行完了
  3. 第三步再执行刚才的微任务
    打印出str ‘4444’;
    继续往下走 ’async1 end‘
    awiat下面的代码一般都是等着await后面执行完毕后再执行滴
    好了 万事俱备 只欠东风
    async1执行完了
    继续往下走 打印’promise3’
    .then 微任务 先放起来 执行后面的
  4. 第四步后面同步代码没有了哇 再执行微任务
    打印‘promise4’（对不起啊，我来晚了）
  5. 第五步同步代码跟微任务都执行完了 剩宏任务了
    setTimeout丈母娘 ，我带着诚意来了（开着大奔，好多money，还有给丈母娘准备的礼物，当然岳父大人也有）
    打印’setTimeou‘ （吖，行吧行吧，看你这么有诚意，我就把我女儿许给你了，待她好点儿啊）
潇洒小杰杰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise、async/await在任务队列中的执行顺序
yangyang的专栏
08-20 2268
我们这篇主要讲浏览器和Nodejs环境下任务队列的执行顺序，尤其关注promise和async/await在任务队列中的执行顺序。 1.setTimeout、setImmediate、nextTick、Promise.next情况下 我们先记住几条结论： 1.有process和setImmediate就考虑是在nodejs环境下 2.微任务中nextTick队列在Promise.next前 3.宏...
JS之async与await（队列）
weixin_47409897的博客
09-13 808
一、async与await 1：async函数 async用来定义一个异步函数，这个函数的返回值为Promise对象 函数的结果由async函数执行后的返回值决定 2：await表达式 await表达式，右侧一般为promise对象，但是也可以为其他值 假如为Promise对象的时候，其值为Promise的成功或失败的结果 假如为其他值的时候，那么其值为该表达式的结果 注意点： 01：await表达式需要放在async函数里面，但是async函数里面可以不含await表达式 02：如果await的P
JavaScript中async和await的使用以及队列问题
程序猿布欧的博客
06-27 817
宏任务和微任务在前端面试中，被经常提及到，包括口头和笔试题 async&& await结合promise在面试时回遇到的队列问题 同步任务1，4，执行 getUserInfo作为异步方法，优先执行同步代码2 p1和userInfo方法，p2这三个作为promise会放在异步队列当中,并且await后面的代码会阻塞后续的代码执行，因此3也会作为异步任务，放在await之后执行 此时，会先执行5 所有的同步代码执行完成之后，从队列中，执行异步任务，p1,awaitRes---->接口返回值---------
面试之事件循环（消息队列）、宏任务、微任务、async、await原理，事件机制
weixin_43845137的博客
02-08 1489
目录面试之宏任务、微任务、async、await原理消息队列之宏任务、微任务消息队列示例1消息队列示例2消息队列3消息队列4async与await的原理多个异步嵌套es6 之 使用yield 的方式es7 之 async 与 await的简写 面试之宏任务、微任务、async、await原理 消息队列之宏任务、微任务 1：JS引擎执行任务的时候是单线程的，也就是说一条流水线下来执行 2：优先执行同步任务，异步任务放置在消息队列之中 3：消息队列分为两种，宏队列（宏任务），微队列（维任务） 4
结合面试题讲解 async await
BiuBiu_Tian(田)
06-25 4867
首先，await 只能出现在 async 函数中。 1、async 的作用 async 函数负责返回一个 Promise 对象如果在async函数中 return 一个直接量， async 会把这个直接量通过Promise.resolve() 封装成 Promise 对象; 如果 async 函数没有返回值,它会返回 Promise.resolve(undefined) 2、awa...
关于async和await的一些误区实例详解
09-04
总结一下，async和await的核心是基于任务的异步编程模型，它允许方法在不阻塞调用者的情况下进行异步操作。理解它们的工作原理对于编写高效、响应式的C#应用程序至关重要。避免将它们与多线程直接关联，而是要理解...
使用async await 封装 axios的方法
08-27
使用 async await 封装 axios，可以使得所有的请求都可以使用同步写法，同时处理错误信息等。 在封装 axios 时，我们可以创建一个 api.js 文件，全局创建 api 实例。例如： ``` import axios from 'axios' const qs...
Js中async/await的执行顺序详解
10-19
随着async/await正式纳入ES7标准，越来越多的人开始研究据说是异步编程终级解决方案的 async/...下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
ASP.NET 谨用 async/await
10-18
【ASP.NET 中慎用 async/await】\n\n在 ASP.NET 开发中，async/await 关键字的引入，使得异步编程变得更加简洁。然而，实际应用中，如果不小心，可能会遇到一系列问题，如异常捕获困难、死锁以及应用程序崩溃。本文...
async/await和promise的(eventloop)任务队列执行顺序？
TeroZhang的博客
08-07 892
前言: 关于js异步执行顺序，宏任务、微任务这些，还有async/await已经有好多人写了。但是每个人都有自己的理解，最主要的是要自己琢磨，学习了一下，谈谈自己的理解。 先上一张图压压惊！！！ 微任务与宏任务区别，纯白话理解： 这个就像是去银行办理业务，得先排队取号。我们可以把每个办理业务的人当做是一个宏任务的存在。那么多个宏任务合在一起，可以说这就是一个任务队列。 那么微任务是什么呢？一个宏任务在执行的过程中，是可以添加一些微任务的。 那么微任务是什么呢？举个例子: 就像在柜台办理业务，你前边的.
JS高级——await-async
zep
03-12 6970
一、异步函数 async function async关键字用于声明一个异步函数： async是asynchronous单词的缩写，异步、非同步； sync是synchronous单词的缩写，同步、同时； async异步函数可以有很多中写法： 二、异步函数的执行流程 异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。 异步函数有返回值时，和普通函数会有区别： 情况一：异步函数也可以有返回值，但是异步函数的返回值会被包裹到Promise.resolve中； 情况二：
js中async与await详解
林深不见鹿 的博客
05-29 3077
async和await是JavaScript中处理异步编程的一种新方式，它们可以让异步操作的结果像同步操作一样被处理，从而使得异步编程更加简洁和易读。在使用async和awaitasync函数的返回值是一个Promise对象；await关键字只能在async函数中使用；await关键字只能等待返回Promise对象的异步函数执行完成；在使用await时，JavaScript引擎会暂停执行当前函数，直到异步操作完成。
async和await的使用
LL200210的博客
04-01 954
概述 await就是暂停异步函数，等待期约解决 ，换句话说await 等待的是一个值，遇到await就会向事件队列里面添加一个执行任务 await的两种使用 1.await后面直接跟一个值 async function a(){ console.log(4); console.log(await 6); console.log(7); } a(); console.log(5); //4 5 6 7 ...
promise、async和await回调队列和事件循环 剖析
刘泽美的博客
06-02 760
本文受https://segmentfault.com/a/1190000015057278文章启发。 不过感觉作者写得比较冗余，且有些东西还是没有讲明白。于是我尝试用更进阶的代码并配上更简洁的注释来讲明白这些事情。 1. 事件循环 js在执行的过程中是单线程的，所以采用了事件循环机制。也就是说，从上往下执行。执行完毕 => 判断是否微任务 => 判断是否有宏任务 2.回调队列...
Javascript中async与await的用法
loftyamb的博客
11-03 7888
async与await的用法问题关于async关于await例子关于异常 问题 希望在一个函数执行完毕之后才去执行另外一个函数，如何解决？ 关于async async 其实就是promise的语法糖。函数前面必须加一个async，异步操作的方法前加一个await 关键字。顾名思义，就是让你等一下，执行完了再继续往下走。注意：await 只能在async函数中执行，否则会报错。 关于await await的意思就是等待。它后面可以跟一个表达式。如果是值(如字符串、数字、普通对象等等)的话，返回值就是本身的值
@Async Spring异步任务的深入学习与使用
终生学习践行者
11-25 6620
基于最新Spring 5.x，详细介绍了Spring的@Async异步任务的概念和使用方法，以及一些问题的解决办法！
多线程--await/async
jia1909756547的博客
05-22 914
1.await/async简述 await/async是C#保留关键字，通常成对出现 async修饰方法，可以单独出现，对原来的方法没有任何改变，但会警告 await在方法体，只能出现在task/async方法前面，单独使用await会报错 async位于方法修饰符之后，返回类型之前 2.作用效果 3.相关例子 3.1.单独使用async 代码如下： /// <summary> ///方法带async，但方法体中Task前面不带await（与普通方法执行一样，只不过会警告.
【3期】javascript的this指向-完整场景
微光·火炬
09-08 366
目录 默认绑定 隐式绑定 显式绑定 new绑定 默认绑定 全局环境中，this默认绑定到window 在控制台中分别执行以下代码，注意，全局变量相当于window对象的属性 <1> console.log(this==window) // true <2> var a={ foo:"123", bar:"456", that:this } a.that // window <3> this // window 函数独立调用或者被嵌套函数独立调用时.
async await宏任务微任务
最新发布
08-30
在 JavaScript 中，async/await 是用于处理异步操作的语法糖。它建立在 Promise 和生成器函数之上，使得编写和处理异步代码更加简洁和直观。 当我们在一个 async 函数中使用 await 关键字来等待 Promise 的解决时，事件循环会暂停执行 async 函数中的代码，并等待 Promise 的状态变为解决（resolve）。一旦 Promise 被解决，async 函数将继续执行，并返回解决的值。 宏任务（macro task）和微任务（micro task）是异步任务的两类不同分类。宏任务通常包括 setTimeout、setInterval、I/O 操作等，而微任务则包括 Promise、process.nextTick 等。 在事件循环中，宏任务会优先执行，而微任务会在当前宏任务执行结束后立即执行。也就是说，在一个宏任务中产生的所有微任务会在下一个宏任务执行前被处理完毕。async/await 使用的 Promise 是微任务，因此在 async 函数中使用 await 时，会先执行等待状态的 Promise 的回调函数（微任务），然后再执行其他的宏任务。 总结起来，async/await 允许我们以同步的方式编写异步代码，并且通过微任务确保代码执行的顺序和可控性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值