最新发布《数智时代的AI人才粮仓模型解读白皮书(2024版)》,立即领取! 了解详情
写点什么

Javascript 之 async 四重奏(三)

  • 2019-12-31
  • 本文字数:1072 字

    阅读完需:约 4 分钟

Javascript之async四重奏(三)

async-await 的兼容并包

async 函数

在 es7 中引入的 async 函数使得处理异步操作更加方便:


直接在普通函数前面加上 async,表示这是一个异步函数,在要异步执行的语句前面加上 await,表示后面的表达式需要等待。我们通过下面的例子先简单了解一下:


(注:左右/上下滑动屏幕可查看全部代码)


function timeout(ms) { return new Promise((resolve) => {   setTimeout(resolve, ms); });}async function asyncPrint(value, ms) { await timeout(ms); console.log(value);}asyncPrint('hello world', 50);
复制代码


上面的代码指定 50 毫秒后输出 hello world


async 函数有多种使用方式:


// 函数声明式:


async function foo() {}


// 函数表达式:


const foo = async function () {}


// 对象的方法:


let obj = {async foo() {}}


obj.foo().then()


// 箭头函数:


const foo = async () => {}


async 函数返回一个 promise 对象,可以使用 then 方法添加回调函数:


(注:左右/上下滑动屏幕可查看全部代码)


async function f() {return 'hello world';}f().then(v => console.log(v))// "hello world"
复制代码


Await 命令后面是一个 promise 对象,如果不是会被转成一个立即 resolve 的 promise 对象:


(注:左右/上下滑动屏幕可查看全部代码)


async function f() {return await 123;}f().then(v => console.log(v))// 123
复制代码


通过 async 函数来发送多个请求:


(注:左右/上下滑动屏幕可查看全部代码)


async function dbFuc(db) {let docs = ['/posts.json', '/gets.json', '/puts.json'];let promises = docs.map((doc) => db.post(doc));let results = await Promise.all(promises);console.log(results);}
复制代码


由此可见,async 函数不仅包含了 promise、generator,代码也更加简洁。


总的来说,async 函数就是 generator 函数的语法糖,相对于 generator 函数 async 函数有以下优点:


  1. 有内置执行器,不用调用 next

  2. Generator 函数是需要调用 next 指令来运行异步的语句,async 不需要调用 next,直接像运行正常的函数那样运行就可以

  3. 有更好的语义化

  4. 语义化更明确,相比较于 Generator 的*和 yield,async 和 await 更明确。

  5. await 后面可以跟 promise 或者任意类型的值

  6. yield 命令后面只能是 Thunk 函数或 Promise 对象,而 async 函数的 await 命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)。

  7. 返回一个 promise 对象,可以调用.then

  8. async 直接返回一个 promise 对象,可以用 then 和 catch 来处理。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/QgC2OjVF4pvltte9V_gkIQ


2019-12-31 15:42517

评论

发布
暂无评论
发现更多内容

[初恋系列]一个让初恋爱不释手的购物平台(电商系统微服务拆分)

人工智能~~~

微服务 电商平台 拆分 电商系统

从一盏路灯,看亿万级物联网联接的智能之路

华为云开发者联盟

物联网 IoT 华为云 LiteOS NB- IoT

新人融入团队的必备python技巧,python 编码规范,滚雪球学Python第4季12篇

梦想橡皮擦

10月月更

StreamNative 宣布 2300 万美元 A 轮融资,Prosperity7 Ventures 与华泰创新联合领投

Apache Pulsar

融资 Apache Pulsar StreamNative

👊 【Spring技术实战】@Async机制的使用技巧以及异步注解源码解析

洛神灬殇

Java spring API 10月月更

北冥多样性计算融合架构系列解读之 一文读懂华为昇思科学计算

Geek_32c4d0

北冥多样性计算融合架构系列解读之 一文读懂北冥基础使能:毕昇C++编译器及北冥融合加速库

Geek_32c4d0

1688 商家基于 HarmonyOS 的多屏协同直播技术方案

阿里巴巴终端技术

ios android 客户端开发 HarmonyOS 直播技术

华云大咖说 | 安超ArSDN云安全场景方案

华云数据

信创 华云数据 安超

信息流推荐系统智能交付解决方案探索

百度Geek说

后端

Cobar提出的一种在分库场景下对Order By / Limit 的优化

捉虫大师

算法 cobar

北冥多样性计算融合架构系列解读之 一文读懂华为MindStudio统一工具链 多样性计算系统下的开发挑战

Geek_32c4d0

算力 多样性计算 北冥

政企融合商城,运营商打开B端市场利器

鲸品堂

运营商

北冥多样性计算融合架构系列解读之 一文读懂华为多瑙统一调度器

Geek_32c4d0

uni-app技术分享| 用uni-app实现拖动的诀窍

anyRTC开发者

uni-app 音视频 WebRTC 移动开发 视频通话

【Vuex 源码学习】第十一篇 - Vuex 插件的开发

Brave

源码 vuex 10月月更

【Flutter 专题】31 图解 TextPainter 与 TextSpan 小尝试

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 10月月更

一个神器,让写东西快得飞起

锋享前端

小工具

「ANR」Android SIGQUIT(3) 信号拦截与处理

阿里巴巴终端技术

android 信号量 anr

Vue进阶(幺叁贰):ES实现数组合并

No Silver Bullet

Vue 数组合并 10月月更

深入剖析 Spring WebFlux

vivo互联网技术

spring WebFlux java

当物联网遇上云原生:K8s向边缘计算渗透中

华为云开发者联盟

Kubernetes 云原生 物联网 边缘计算 kubeedge

解决外卖配送最后一公里:外卖柜存在哪些问题

石头IT视角

和12岁小同志搞创客开发:如何驱动LED数码管?

不脱发的程序猿

少儿编程 DIY 创客开发 LED数码管

[ Golang 中的 DDD 实践] 仓储

baiyutang

golang 领域驱动设计 DDD 10月月更

【LeetCode】搜索旋转排序数组Java题解

Albert

算法 LeetCode 10月月更

看动画学算法之:栈stack

程序那些事

数据结构 算法 看动画学算法 程序那些事 stack

如何基于Jupyter notebook搭建Spark集群开发环境

华为云开发者联盟

spark Jupyter Notebook 集群 Spark集群 Sparkmagic

5G NR 网络类型移动开发小记

阿里巴巴终端技术

ios android 5G 移动开发 移动网络

CSS架构之Base层

Augus

CSS 10月月更

css3中的3D转换效果有哪些,浏览器私有前缀兼容写法

你好bk

html5 css3 大前端 html/css

Javascript之async四重奏(三)_语言 & 开发_Think体验设计_InfoQ精选文章