大咖直播-鸿蒙原生开发与智能提效实战!>>> 了解详情
写点什么

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

评论

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

applet跨域访问安全性问题(java.security.AccessControlException:access denied)

xcbeyond

跨域 5月日更 疑难杂症

架构师实战营 模块三作业(基于自研集群 + MySQL 存储的消息队列系统架构设计文档)

好吃不贵

业务架构

架构实战营 - 模块三作业

凯迪

智能家居控制原理

lenka

5月日更

初识Golang之err概述

Kylin

Go 语言 5月日更

Dubbo 泛化引用

青年IT男

dubbo

架构训练营模块3作业-消息队列架构设计

WebRTC下摄像头的采集分析

小辣条

ios WebRTC

挖矿探索一:狗狗币-mac普通电脑

程序员架构进阶

比特币 区块链 28天写作 5月日更

自研集群+MySQL架构设计文档模板

9527

架构实战营

架构实战营 模块三作业

fazinter

架构实战营

腾讯T3大佬亲自讲解!我的腾讯安卓面试经历分享,分分钟搞定!

欢喜学安卓

android 程序员 面试 移动开发

架构实战营模块 3 作业

阿体

消息队列的架构设计文档

Geek_bded54

推荐一个GitHub的开源电子书仓库,值得收藏

C语言与CPP编程

Java c++ Python C语言 电子书

架构实战营 - 模块三总结

凯迪

架构实战营

架构实战营 模块三课后作业

iProcess

架构实战营

作业三架构设计文档

大肚皮狒狒

ARTS - week 9

steve_lee

模块三:课后作业

黄先生

架构实战营

音频变速变调-sonic源码分析

floer rivor

音视频

架构实战训练营 - 模块三课后作业

Johnny

架构实战营

GreenPlum的CURD

数据社

greenplum 5月日更

学妹问我:OpenJDK是什么?作为师哥,必须万字详解屁颠屁颠奉上

牛哄哄的java大师

Java

已收藏!2021年最新腾讯Android面经,超详细

欢喜学安卓

android 程序员 面试 移动开发

模块三作业

梦寐凯旋

架构实战营

MySQL索引原理浅析

逸少

MySQL 索引结构 索引

霸气!这份清华学霸整理的Java线程池笔记,2小时从入门到入坟

飞飞JAva

Java

服务器又被挖矿了,怎么防?

运维研习社

挖矿 5月日更 Linux安全

消息中间件详细架构设计文档

白发青年

架构实战营

架构实战营 模块3作业

夏日

架构训练营

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