写点什么

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

评论

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

决策树-分类树

烧灯续昼2002

机器学习 决策树 sklearn 11月月更

前台小姐姐是如何转行测试,从月薪3000到月薪15K,实现逆袭

千锋IT教育

从事分布式工作10余年,这本书颠覆了我的认知!

博文视点Broadview

开源!非凸Rust高性能日志库ftlog

非凸科技

webpack配置优化,让你的构建速度飞起

Geek_02d948

webpack

为什么vue3要选用proxy,好处是什么?

hellocoder2029

JavaScript

怎么从容地拿捏时间?来自富兰克林的启示

无人之路

时间管理

一路同行,再聚乌镇 | 旺链科技与你相约世界互联网大会

旺链科技

产业区块链 世界互联网大会 乌镇 企业号十月PK榜

【网易云信】Sanitizers 系列之 leak sanitizer 介绍

网易智企

【云原生】内存数据库如何发挥内存优势

石臻臻的杂货铺

数据库 SPL 11月月更

webpack热更新原理(面试大概率会问)

Geek_02d948

webpack

北京web前端学习哪个机构比较好

小谷哥

深入理解Node.js的进程与子进程

coder2028

node.js

2022年在线招聘求职行业洞察

易观分析

招聘 在线

科普 | 关于NFT的概念、价值及应用

NFT Research

一文读懂Js中的this指向

hellocoder2029

JavaScript

Echarts实现全国地图展示

格斗家不爱在外太空沉思

JavaScript eCharts 11月月更

移动开发热更新技术选型盘点

Onegun

移动开发 热更新

大数据培训零基础应该注意什么

小谷哥

零基础参加web前端培训学习怎么样

小谷哥

北京大数据培训学习怎么选

小谷哥

编程培训学习零基础应该怎么选择呢

小谷哥

发布自己的第一个npm包

格斗家不爱在外太空沉思

npm nodejs 11月月更

Sanitizers 系列之 leak sanitizer 介绍

网易云信

系统

大咖说· 联蔚数科|如何做好一个业务中台?

大咖说

阿里云 业务中台 企业云服务

在VUE中使用vue-baidu-map获取经纬度和搜索地址

格斗家不爱在外太空沉思

Vue 百度地图 11月月更

深入剖析nodejs中间件

coder2028

node.js

一比一手写迷你版vue,彻底搞懂vue运行机制

hellocoder2029

JavaScript

指南

Geek_02d948

webpack

SpringMVC介绍及创建

鸭鸭yyds

springmvc 11月日更 11月月更

深度理解NodeJS事件循环

coder2028

node.js

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