【js】js 异步机制详解 Generator / Async / Promise

三种语法功能放在一起,是因为他们都有相似特点:

  • 维护某种状态
  • 在未来恢复状态并执行

本文重点回答以下几个问题:

  • 为什么 Generator 和 Async 函数的 代码执行流 都可以简化成树形结构?
  • async 函数为什么返回一个 promise?返回了怎样一个 promise?
  • async 函数如何优雅的转换成 promise 函数?
    Generator 用法和思考

基本生成器

generator 是生成器,从生成器的行为来看,它就是一个迭代器。

function* foo(end) {var idx = 0;while (idx < end) {yield idx; // 保存当前状态并返回 当前idxidx += 5;}
}const iterator = foo(20);
// iterator.next().value 手动迭代
for (let val of iterator) { // 输出 0 到 19console.log(val);
}

对应到生成器函数中,他会在 yield 的时候保存当前函数的状态。那么,函数的状态保存在哪? 习惯了 C 函数的我们很难想象如何将状态保存在函数中。可能协程和 setjmp/longjmp 可以辅助我们思考生成器的实现,但还是不能直接对应到生成器函数的行为。比如:生成器需要记录如下信息

  • Idx 的大小, end 大小
  • pc 指针在 第 5 行

想在 c 语言中保存上述信息是不容易的。是因为函数在 js 是第一类值,上述的信息便可以保存在函数值本身内。对应quickjs 相当于将 pc 指针 和 参数 信息,local_buf,保存在对应的函数对象 (实际上保存在 StackFrame 中) 内,而 cur_ref 信息 quickjs 本身就已经保存了。而 c/c++ 语言的函数没有类似功能。

嵌套多层迭代器

  • 树形生成器结构。讲 yield 这种语法,是因为它跟 async 的执行流非常像,但会可以看到
  • 使用树形生成器生成 0 ~ 20 的值
    暂时无法在飞书文档外展示此内容
function* inner(index) {var i = 0;while (i < 5) {yield index + i;i++;}
}// 错误的生成器用法,但是启发我们思考,这样的用法,是不是很像 await?
// function* foo(index) {
//   while (index < 20) {
//     yield inner(index);
//     index += 5;
//   }
// }// 正确版本
function* foo1(index) {while (index < 20) {var it = inner(index);for (let val of it) {yield val;}index += 5;}
}// 语法糖版本
function* foo2(index) {while (index < 20) {yield *inner(index);index += 5;}
}const iterator = foo1(0);for (let val of iterator) {console.log(val);
}

async 执行流的思考

  • Async 的代码执行流程是下面这棵树的中序遍历

  • Async 函数的代码执行流程如下

    • 先执行绿色部分代码,直到最底层的 promise,由于promise 测试未决定(pending 状态),整个函数暂停退出。
    • promise resolve或reject 后,恢复中序遍历执行淡蓝色部分代码,直到下一个 promise。这里相当于执行了 promise 的 then 回调。
      • Plus. 这里仍然有一次 暂停执行。因为 新的 promise 是 pending 状态。
    • 新的 promise resolve或reject 后,继续恢复执行 。。。。
    • Async 函数的结尾的 return 道理上相当于一个 then 回调
  • Async 函数的代码执行流程非常像 树形 generator

  • 都说 async 函数返回一个 promise,它返回的 promise 到底是什么?
    在这里插入图片描述

  • Async 函数框架

async function asyncfunc() {code1;var a1 = await asyncfunc1(); // 这里是一个 async 函数code2;var a2 = await promise1; // 这里是一个 真正的 Promisecode3;var a3 = await asyncfunc2(); // 这里是一个 async 函数codeR;return x;
}asyncfunc();
  • 可以尝试使用如下代码,单步调试来验证
async function wrapFetch(url) {console.log("wrapFetch code1");const response = await fetch(url);console.log("wrapFetch code2");return response;
}// 异步函数示例
async function fetchAsyncData() {console.log("fetchAsyncData code1");const response = await wrapFetch('https://qqlykm.cn/api/weather/get');console.log("fetchAsyncData code2 ok?", response.ok);const data = await response.json();console.log(data);
}// 调用异步函数
console.log("before async");
fetchAsyncData();
console.log("after async");
  • 问题:能把 async 函数串行化么?答案是不能。只要使用了 promise (叶子节点是真正的 promise),代码的执行就要遵循 promise 的执行规则,而 promise 本身就是异步的,因此无法串行化。

一点点 Promise 的思考

想要理解如何将 async 函数返回的到底是什么 promise?以及如何将 async 函数翻译成一个 promise 的形式,需要深入理解 then 函数。

Then 函数
  • Then 函数返回一个 promise,称其为 p。
  • Then 注册的回调函数中也会返回一个值。那么 返回 一个值 和 返回一个 promise 有什么不同?
  • 如果回调函数返回了 promise,那么这个promise 和 then 返回的 promise p 是 什么关系?官方文档:链式调用。
    • 结论:他俩在行为上是 同一个 promise
    • 知道这一点,就可以轻松的把一个 async 函数改写成 promise 的形式了。
const myPromise = new Promise((resolve, reject) => {// 进行异步操作const randomNumber = Math.random();// 如果操作成功,调用resolve并传递结果resolve(randomNumber);
});// 使用Promise对象
myPromise.then(result => {// 操作成功时的处理逻辑console.log("操作成功,结果为:" + result);**return 1; ****return new Promise((rs, rj) => rs(2));**}).then( val => {console.log(val);})

将 async 改写成 promise

如何改写?下面用一个示例来展示

注:这里并没有关注异常执行流,而是只关注异步执行流。异常执行流要想完全转换,需要在promise里注册错误回调,并且 async 和 promise 都要捕获异常

// async 写法async function asyncfunc() {code1;var a1 = await asyncfunc1();    // 这里是一个 async 函数code2;var a2 = await promise1;     // 这里是一个 真正的 Promisecode3;var a3 = await asyncfunc2();    // 这里是一个 async 函数codeR;return x;
}asyncfunc();
// 等价的promise 写法function func() {return new Promise((resolve, reject) =>{code1;func1().then( (val) => resolve(val) );}).then((a1) => {code2;return promise1;}).then((a2)=> {code3;// 返回一个Promisereturn func2(); }).then((a3) => {codeR;return x;});
}
func();

结论:async 语法糖有什么好处呢?

  • 代码写起来更简洁、优雅,意味着 减少出错率
  • 词法作用域更广。写 code2 可以用 code1 部分的变量,写 promise 的时候就没办法了。

可验证代码

异步调用一个 网络 api 接口

  • async 版本
async function wrapFetch(url) {console.log("wrapFetch code1");const response = await fetch(url);console.log("wrapFetch code2");return response;
}// 异步函数示例
async function fetchAsyncData() {console.log("fetchAsyncData code1");const response = await wrapFetch('https://qqlykm.cn/api/weather/get');console.log("fetchAsyncData code2 ok?", response.ok);const data = await response.json();console.log(data);
}// 调用异步函数
console.log("before async");
fetchAsyncData();
console.log("after async");
  • 等价 Promise 版本
function wrapFetch(url) {return new Promise( function (resolve, reject) {console.log("wrapFetch code1");fetch(url).then( (response) => {resolve(response);console.log("wrapFetch code2");})});
}function fetchAsyncData() {return new Promise(function (resolve, reject) {console.log("fetchAsyncData code1");wrapFetch('https://qqlykm.cn/api/weather/get').then( val => resolve(val) )}).then( (response) => {console.log("fetchAsyncData code2 ok?", response.ok);return response.json()}).then((data) => {console.log(data);});
}// 调用异步函数
console.log("before async");
fetchAsyncData();
console.log("after async");

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/636707.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cloudreve存储策略-通过从机存储来拓展容量

Sham的云服务器是搬瓦工最低低低配的&#xff0c;1H 0.5G不说&#xff0c;硬盘容量也只有10g&#xff0c;说实话&#xff0c;装了宝塔面板和服务器套件后&#xff0c;基本满了&#xff0c;这时又想在云服务器上打个网盘用于下载、存储&#xff0c;这时就需要拓展硬盘&#xff0…

【podman】podman学习

Podman 官网 快速开始 面向 Docker 用户的 Podman 和 Buildah Podman是一个开源的容器、pod和容器映像管理引擎。Podman使查找、运行、构建和共享容器变得容易。 Podman Desktop是Podman的图形应用程序&#xff0c;使其易于在Windows、MacOS和Linux上安装和使用Podman&…

烟火检测AI边缘计算智能分析网关V4如何通过ssh进行服务器远程运维

智能分析网关V4是一款高性能、低功耗的AI边缘计算硬件设备&#xff0c;它采用了BM1684芯片&#xff0c;集成高性能8核ARM A53&#xff0c;主频高达2.3GHz&#xff0c;并且INT8峰值算力高达17.6Tops&#xff0c;FB32高精度算力达到2.2T&#xff0c;每个摄像头可同时配置3种算法&…

npm, yarn和pnpm清理缓存

文章目录 前言npm查看缓存路径清理缓存 yarn查看缓存路径清理缓存 pnpm查看缓存路径清理缓存 前言 npm, yarn和pnpm是时下主流的node.js包管理器。 随着前端项目的增多&#xff0c;会下载许多的依赖。不管是哪种包管理器&#xff0c;都会使用缓存来增加下次下载的速度。但很多…

Fiddler基础使用指南

1. Fiddler介绍 Fiddler 是一款抓包工具&#xff0c;可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作&#xff0c;也可以用来检测网络安全 2. 设置过滤 通过设置过滤条件&#xff0c;可以使抓包工具过滤掉非目标包 3. 删除数据 被抓取的包可以进行手动删除 …

使用aspera下载SRA数据速度高达 下载中国gsa数据? ascp

转载自&#xff1a;秘籍 | 惊了&#xff0c;使用aspera下载SRA数据速度高达 291Mb/s - 简书 一、安装Aspera Connect 安装Linux版的Aspera Connect # 上面链接是最新版&#xff0c;因此下载的时候去官网复制最新的链接地址下载&#xff0c;否则可能会报错 wget https://d3gcli…

54 C++ 多线程 条件变量 condition_variable,wait(),notify_one()

一 前提&#xff1a;之前代码的缺陷 在前面我们使用两个线程 &#xff0c;一个线程读&#xff0c;一个线程写来完成对于共享数据访问。 我们把这个代码 先放在这里&#xff0c;方便回忆&#xff0c;然后说明代码可能存在的问题&#xff0c;然后改动。 class Teacher174 { pri…

奇偶性【高数笔记】

【如何判断奇偶性】 1.根据定义&#xff1a;f(x) - f(-x) 奇函数&#xff1b;f(x) f(-x) 偶函数 2.运算法则&#xff1a;四则运算和复合运算 #四则中&#xff0c;奇偶相加为非奇非偶 #复合运算&#xff1a;内偶则偶&#xff0c;内奇看外 3.已知的常识函数&#xff1a; 奇函数&…

Elasticsearch Index Shard Allocation 索引分片分配策略

Elasticsearch 索引分片的分配策略说明 在上一篇《索引生命周期管理ILM看完不懂你锤我 》&#xff08;https://mp.weixin.qq.com/s/ajhFp-xBU1dJm8a1dDdRQQ&#xff09;中&#xff0c;我们已经学会了索引级别的分片分配过滤属性&#xff0c;也就是在配置文件中指定当前节点的属…

牛客刷题之字符串

文章目录 字符串的长度(len)字符串的大小写删除字符串的指定字符字符串的重复输出&#xff08;不用循环语句&#xff09;字符的指定长度的输出&#xff08;切片&#xff09;字符串分隔 字符串的长度(len) str input()print(len(str))字符串的大小写 upper()全部大写 , lower()…

基于JavaWeb+SSM+Vue基于微信小程序的网上商城系统的设计和实现

基于JavaWebSSMVue基于微信小程序的网上商城系统的设计和实现 滑到文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 滑到文末获取源码 Lun文目录 目录 1系统概述 1 1.1 研究背景 1 1.2研究目的 1 1.3系统设计思想…

HTB Monitored

Monitored user Nmap ┌──(kali㉿kali)-[~] └─$ nmap -A 10.10.11.248 Starting Nmap 7.80 ( https://nmap.org ) at 2024-01-14 23:42 CST Stats: 0:00:15 elapsed; 0 hosts completed (1 up), 1 undergoing Connect S

一步一步写线程之五线程池的模型之一领导者追随者模型

一、线程池的模型 在学习过相关的多线程知识后&#xff0c;从更抽象的角度来看待多线程解决问题的方向&#xff0c;其实仍然是典型的生产和消费者的模型。无论是数据计算、存储、分发和任务处理等都是通过多线程这种手段来解决生产者和消费者不匹配的情况。所以&#xff0c;得…

软件测试的工作描述

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

Voc标签文件转Yolo标签文件程序

为了方便&#xff0c;我将代码封装成了桌面程序&#xff0c;GUI部分我就不介绍了&#xff0c;泛泛而谈到时啥都没学会。 一、yolo标签格式 我们看一下yolo标签的格式&#xff1a; <class index> <x center> <y center> <width> <height> \text…

使用LibreOffice做出第一个开源贡献的6种简单方法

2022年5月是LibreOffice月。这里有一些简单的方法来完成您的第一个开源贡献。 参与开源似乎有点令人困惑。从哪里开始?如何编码?和谁说话?别人怎么知道你做出了贡献&#xff0c;除此之外&#xff0c;还有人关心你吗? 事实上&#xff0c;这些问题都有一个简单的答案:LibreO…

蓝桥杯官网题目:2.包子凑数

链接:题目点这里 首先要知道一个数学定理裴蜀定理&#xff0c;还有完全背包的基本运用&#xff0c;这里只介绍前者 也可以看一下我的个人理解&#xff0c;我是第一次听说这个定理&#xff0c;理解可能有误差。 假设gcd(a,b)d,gcd是最大公约数的意思。即a&#xff0c;b的最大…

fabric.js 组件 图片上传裁剪并进行自定义区域标记

目录 0. 前言 1. 安装fabric与引入 2. fabric组件的使用 3. 属性相关设置 4. 初始化加载 4. 方法 5. 全代码 0. 前言 利用fabric组件&#xff0c;实现图片上传、图片”裁剪“、自定义的区域标记一系列操作 先放一张效果图吧&#x1f447; 1. 安装fabric与引入 npm i …

随身WiFi到底能不能买?一篇文章给你讲清楚!随身WiFi哪个品牌最靠谱 ,随身WiFi推荐第一名

随着移动设备的普及&#xff0c;人们对无线网络的需求越来越高。传统WiFi虽然覆盖面广&#xff0c;但移动性差&#xff0c;不能满足人们在外出、旅行或商务场合的上网需求。此时&#xff0c;随身WiFi的出现填补了这一空白。那么&#xff0c;随身WiFi究竟有何优势和劣势&#xf…

Zabbix 系统监控详解

1 介绍 1.1 摘要 本文深入浅出&#xff0c;切近实际运维应用&#xff0c;由 zabbix 3.4 版本入手&#xff0c;学习 zabbix 监控告警实现方式&#xff0c;由 zabbix 5.0 浅出实现快速部署、快速应用。本人从业多年&#xff0c;关注 zabbix 开源社区&#xff0c;以及 zabbix 官…