第127篇:异步函数(async和await)练习题(异步,消息队列)

异步,函数,async,await,练习题,消息,队列 · 浏览次数 : 92

小编点评

**输出结果:** ``` 1 2 4 6 8 9 12 13 14 15 16 17 18 19 20 21 22 23 24 8967 ``` **解释:** 1. `foo()` 函数首先打印 1,然后等待 8 的异步任务返回,并将结果打印为 2。 2. `bar()` 函数首先打印 4,然后等待 6 的异步任务返回,并将结果打印为 6。 3. `foo()` 函数在 `bar()` 中使用 `await` 关键字暂停执行,并将异步任务添加到消息队列中。 4. `bar()` 函数在暂停后等待 6 的异步任务返回,并将结果打印为 8。 5. `foo()` 函数在等待 8 的异步任务完成后返回。 6. 在 `foo()` 中,`await` 关键字再次暂停执行,并将异步任务添加到消息队列中。 7. `bar()` 函数在暂停后等待 6 的异步任务返回,并将结果打印为 6。 8. `foo()` 函数在等待 6 的异步任务完成后返回。 9. 由于 `Promise.resolve(8)` 被多处理了一次,因此 `foo()` 方法后恢复的返回值不是 8,而是 89。 10. 在新版浏览器中,`await` 后面是期约的情况如何处理做过一次修改。`Promise.resolve(8)` 生成一个异步任务,而在这个例子中,它被多处理了两次,导致最终的结果是 89。

正文

好家伙,本篇为做题思考

书接上文

 

题目如下:

 1.请给出下列代码的输出结果,并配合"消息队列"写出相关解释

async function foo() {
    console.log(2);
    console.log(await Promise.resolve(8));
    console.log(9);
}
async function bar() {

    console.log(4);
    console.log(await 6);
    console.log(7);
}
console.log(1);
foo();
console.log(3);
bar();
console.log(5);

 

好我们公布答案:

 

(1) 打印 1;

(2) 调用异步函数 foo();

(3)(在 foo()中)打印 2;

(4)(在 foo()中)await 关键字暂停执行,向消息队列中添加一个期约在落定之后执行的任务;

(5) 期约立即落定,把给 await 提供值的任务添加到消息队列;

(6) foo()退出;

(7) 打印 3;

(8) 调用异步函数 bar();

(9)(在 bar()中)打印 4;

(10)(在 bar()中)await 关键字暂停执行,为立即可用的值 6 向消息队列中添加一个任务;

(11) bar()退出;

(12) 打印 5;

(13) 顶级线程执行完毕;

(14) JavaScript 运行时从消息队列中取出解决 await 期约的处理程序,并将解决的值 8 提供给它;

(15) JavaScript 运行时向消息队列中添加一个恢复执行 foo()函数的任务;

(16) JavaScript 运行时从消息队列中取出恢复执行 bar()的任务及值 6;

(17)(在 bar()中)恢复执行,await 取得值 6;

(18)(在 bar()中)打印 6;

(19)(在 bar()中)打印 7;

(20) bar()返回;

(21) 异步任务完成,JavaScript 从消息队列中取出恢复执行 foo()的任务及值 8;

(22)(在 foo()中)打印 8;

(23)(在 foo()中)打印 9;

(24) foo()返回。

 

所以答案是

1

2

3

4

5

6

7

8

9

 

好了,结束了,没什么问题了

步骤也解释清楚了

 

但是我隐约感到了不对劲

怎么会是123456789呢?

foo()应该是先恢复的,但是这里明显bar()先恢复了

 

 

我们上机试一下

 

 

 

 

诶,结果不对

前面地12345都没有问题,6789的输出变成了8967

我们主要来看和6789有关的输出字段

 

我们再来仔细地看看前面地解释,并把关键解释划出来

(4)(在 foo()中)await 关键字暂停执行,向消息队列中添加一个期约在落定之后执行的任务;

(5) 期约立即落定,把给 await 提供值的任务添加到消息队列;

(6) foo()退出;

 

(10)(在 bar()中)await 关键字暂停执行,为立即可用的值 6 向消息队列中添加一个任务;

(11) bar()退出;

 

(13) 顶级线程执行完毕;

(14) JavaScript 运行时从消息队列中取出解决 await 期约的处理程序,并将解决的值 8 提供给它;

(15) JavaScript 运行时向消息队列中添加一个恢复执行 foo()函数的任务;

(16) JavaScript 运行时从消息队列中取出恢复执行 bar()的任务及值 6;

 

我们回顾一下消息队列

一个 JavaScript 运行时包含了一个待处理消息的消息队列。. 每一个消息都关联着一个用以处理这个消息的回调函数。

再补充一个关于await的知识点

等到 await 右边的值可用了,JavaScript 运行时会向消息 队列中推送一个任务,这个任务会恢复异步函数的执行。

 

我们试着把这个消息队列画出来

 

(有点抽象,但应该能看懂)

这样,我们就会发现, 因为Promise.resolve(8)被多处理了一次,导致了foo()方法后恢复

所以bar()先恢复了

 

那么实际上机又是怎么回事呢?

(书里面有行小字被我忽略了,后面又找到了)

 

 TC39 对 await 后面是期约的情况如何处理做过一次修改。修改后,本例中的 Promise.resolve(8)只会生成一个 异步任务。

因此在新版浏览器中,这个示例的输出结果为 123458967。实际开发中,对于并行的异步操作我们通常 更关注结果,而不依赖执行顺序。——译者注

 

 

实际上机的消息队列

 

原先的两步处理变成了一步

搞定了,原来如此

 

与第127篇:异步函数(async和await)练习题(异步,消息队列)相似的内容:

第127篇:异步函数(async和await)练习题(异步,消息队列)

好家伙,本篇为做题思考 书接上文 题目如下: 1.请给出下列代码的输出结果,并配合"消息队列"写出相关解释 async function foo() { console.log(2); console.log(await Promise.resolve(8)); console.log(9); }

ECMA标准ECMAScript(JavaScript的一个标准)和C#

2024 年 6 月 26 日,第 127 届 ECMA 大会正式批准了 ECMAScript 2024 语言规范,这意味着它现在正式成为最新 ECMAScript 标准。ECMAScript是ECMA标准中最著名的编程语言标准,它定义了JavaScript语言的核心特性。C#语言则是由ECMA国际

第一百零五篇:变量的原始值和引用值

好家伙,JS基础接着学, 本篇内容为《JS高级程序设计》第四章学习笔记 1.原始值和引用值 ECMAScript变量可以包含两种不同类型的数据:原始值和引用值。原始值(primitive value)就是最简单的数据,引用值(reference value)则是由多个值构成的对象。 在把一个值赋给变

第一百零六篇:变量的不同声明(var,let和const的不同)

JS关于变量的声明,变量提升,暂时性死区

第一百零七篇:基本数据类型(undefined,null,boolean类型)

好家伙, 本篇内容为《JS高级程序设计》第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Number, String和Symbol。 Symbol (符号)是ECMAScript6新增的。还有一种复杂数据类型

第一百零八篇:最常用的基本数据类型(Number类型)

最常用的基本数据类型(Number类型)

第一百一十篇:内存泄漏和垃圾回收(JS)

好家伙,本篇内容为《JS高级程序设计》第四章的学习笔记 1.内存泄露 1.1.什么是内存泄漏? 内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 内存泄漏缺陷具有隐蔽性、积累性的特征,比其

第一百一十一篇:基本引用类型Date

好家伙,本篇为《JS高级程序设计》第五章的学习笔记 1.基本引用类型 引用值(或者对象)是某个特定引用类型的实例,在ECMAScript中,引用类型是把数据和功能组织到一起的结构,(像极了“类”) 经常被人错误的称作“类”。 虽然从技术上讲JavaScript是一门面向对象语言,但是ECMAScri

第一百一十二篇: JS数组Array(一)数组基本用法

好家伙, 1.数组 Array应该就是ECMAScript中最常用的类型了。ECMAScript数组跟其他编程语言的数组有很大区别。 跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据, 但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。 这意味着可以创建一个数组,它的第

第一百一十四篇: JS数组Array(三)数组常用方法

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.数组的复制和填充 批量复制方法 copyWithin(),以及填充数组方法fill()。 这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。 使用这个方法不会改变数组的大小。 1.1.fi