NVIDIA 初创加速计划,免费加速您的创业启动 了解详情
写点什么

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:42519

评论

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

华为云数据库GaussDB(for Cassandra)揭秘:内存异常增长的排查经历

华为云开发者联盟

nosql 云原生 Cassandra 华为云数据库 GaussDB(for Cassandra)

Facebook Chat真的是世界第三大即时通讯客户端吗?

WorkPlus

使用高级视频质量工具 AVQT 评估视频 | WWDC 演讲实录

网易云信

机器学习 算法 音视频

大白话彻底搞懂 HBase Rowkey 设计和实现方式

云祁

大数据 HBase

今天带你详细了解各组件原理!面试建议

欢喜学安卓

android 程序员 面试 移动开发

云小课 | MRS基础入门之HDFS组件介绍

华为云开发者联盟

hadoop hdfs 分布式文件系统 MapReduce服务 数据读写

🏆「终」【JVM 性能调优】「CMS 垃圾回收器」优化实战分析(补充版)

洛神灬殇

CMS JVM GC调优 6月日更

法国政府的"安全 "WhatsApp替代品在短短90分钟内被破解

WorkPlus

ECMAScript 2021 (ES12)通过,正式写入 ECMAScript 标准

清秋

ecmascript 新闻资讯 ES2021 ES12 标准

我用来阻止你摸鱼看直播、知乎和微博的Chrome插件

OBKoro1

chrome 效率工具 大前端 工作效率 chrome扩展

一步一步实现 Vue 3 Reactivity

pingan8787

JavaScript Vue 响应式 Vue 3

云管理平台建设,这项功能必不可缺 ↓

BoCloud博云

云管理平台

深入了解JAVA线程篇

邱学喆

线程 线程池 线程间通信 线程回调

Android快速转战Kotlin教程,附详细答案

欢喜学安卓

android 程序员 面试 移动开发

WICC 2021来袭 融云领衔探索互联网通信云技术新方向

融云 RongCloud

电梯“惊魂”事故频频发生,可视化全平台覆盖,远程值守高效监控

一只数据鲸鱼

数据可视化 智慧城市 智慧园区 智慧电梯

英特尔拥抱开源,岂能没有杀手锏?

E科讯

作为后端开发者的思考:如何看待如今的前端架构

DisonTangor

大前端 后端

怎么办,linux的常用命令就是记不住?于是每天推一些linux指令实践总结

李阿柯

面试 操作系统 linux运维

在线URL转sitemap工具

入门小站

Linux

oneAPI开启新征程 英特尔拥抱开源打造软件生态

E科讯

听说一代数据库大侠都是这样练成的?

华为云数据库小助手

数据库 GaussDB 华为云数据库

用超出行业平均薪资招人?

石云升

职场经验 管理经验 6月日更

Spring @Transactional 注解是如何执行事务的?

程序员小航

Java MySQL spring 事务 代理

Linux之cp命令

入门小站

Linux

英特尔院士Johanna Swan:极致的异构集成是半导体封装未来趋势

E科讯

react源码解析20.总结&第一章的面试题解答

全栈潇晨

React

Rust从0到1-自动化测试-运行测试

rust 自动化测试 Automated Tests 运行测试

什么是SSD Sanitize数据擦除技术?

怀瑾握瑜

存储 SSD 数据保护 备份 删除

JAVA 面向对象 (十二)-- 关键字this

加百利

Java 关键字 this 6月日更

基于朴素ML思想的协同过滤算法(十七)

数据与智能

推荐算法

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