50万奖金+官方证书,深圳国际金融科技大赛正式启动,点击报名 了解详情
写点什么

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

评论

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

Python救救我!如何连接串口实现一个报警灯报警器

ucsheep

Python websocket 串口 报警器 报警灯

第八章作业

流浪猫

第八章作业 - 用户路径

Au revoir

推荐几本 Go 相关书籍

roseduan

书籍推荐 Go Concurrency Patterns Go web 书籍 Go 语言

JavaEE知识体系梳理

空城机

Java Java介绍 Java EE 大学作业

[老孟Flutter] Stateful 组件的生命周期

老孟Flutter

flutter

产品经理面试常见问题总结 3

lenka

3月日更

『计算机组成原理』 计算机系统概述(考研、面试必备)

风骨散人

再推荐一款小众且好用的 Python 爬虫库 - MechanicalSoup

星安果

Python 自动化 爬虫 MechanicalSoup 小众

一份百投百中的计算机校招简历是如何迭代足足26版的?

阿霜

c++ 字节跳动 计算机 简历 校招

文档是给未来自己的珍贵礼物

steve_lee

文档

C++后台开发必看,这个学习路线必须收藏

赖猫

c++ Linux 后台开发 服务器开发

操作系统--死锁避免(银行家算法)

风骨散人

银行家算法

数据分析(第八章作业)

Deborah

双非渣硕的我是如何拿到字节跳动研发岗SP

阿霜

c++ 字节跳动 互联网 计算机 校园招聘

产品经理训练营 - 第八章作业

joelhy

产品经理训练营

计算机组成原理--主存储器

风骨散人

互联网HR黑话指南

这就是编程

作业 - 第九周

eva

ARTS-Week-0

绝影

ARTS 打卡计划 ARTS活动

能进BAT、TMD的C++学习过程大分享

阿霜

c++ 字节跳动 计算机 BATJMD

软件工程是否可以指导小团队的建设

风翱

软件工程 3月日更

【Axure9百例NO.46】中继器多条件判断的优雅处理

zhuchuanming

原型设计 Axure 交互原型

如何提高Flutter应用程序的性能

老孟Flutter

flutter

『C++』我想学C++,C++太难了,那我想入门,给我10分钟我带你入门

风骨散人

产品 0 期 - 第九周作业

vipyinzhiwei

图论--网络流最大流问题

风骨散人

如何判断自己是否适合当前公司?

石云升

离职 28天写作 职场经验 3月日更

Flutter 中与平台相关的生命周期

老孟Flutter

flutter

华为与开发者的“情谊”,在HDC.Cloud 2021上书写智能时代新篇

脑极体

墨迹天气成长中心页用户路径分析(模拟)

🙈🙈🙈

极客大学产品经理训练营

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