文档章节

ES2017异步函数现已正式可用

葡萄城控件技术团队
 葡萄城控件技术团队
发布于 2017/08/21 13:46
字数 1618
阅读 2631
收藏 72
点赞 5
评论 16

ES2017标准已于2017年6月份正式定稿了,并广泛支持最新的特性:异步函数。如果你曾经被异步 JavaScript 的逻辑困扰,这么新函数正是为你设计的。

异步函数或多或少会让你编写一些顺序的 JavaScript 代码,但是却不需要在 callbacks、generators 或 promise 中包含你的逻辑。

如下代码:

function logger() {
    let data = fetch('http://sampleapi.com/posts')
    console.log(data)
}
logger()

这段代码并未实现你的预期。如果你是在JS中编写的,那么你可能会知道为什么。

下面这段代码,却实现了你的预期。

async function logger() {
    let data = await fetch('http:sampleapi.com/posts')
    console.log(data)
}
logger()

这段代码起作用了,从直观上看,仅仅只是多了 async 和 await 两个词。

 

ES6 标准之前的 JavaScript 异步函数

在深入学习 async 和 await 之前,我们需要先理解 Promise。为了领会 Promise,我们需要回到普通回调函数中进一步学习。

Promise 是在 ES6 中引入的,并促使在编写 JavaScript 的异步代码方面,实现了巨大的提升。从此编写回调函数不再那么痛苦。

回调是一个函数,可以将结果传递给函数并在该函数内进行调用,以便作为事件的响应。同时,这也是JS的基础。

function readFile('file.txt', (data) => {
    // This is inside the callback function
    console.log(data)
}

这个函数只是简单的向文件中记录数据,在文件完成之前进行读取是不可能的。这个过程似乎很简单,但是如果想要按顺序读取并记录五个不同的文件,需要怎么实现呢?

没有 Promise 的时候,为了按顺序执行任务,就需要通过嵌套回调来实现,就像下面的代码:

// This is officially callback hell
function combineFiles(file1, file2, file3, printFileCallBack) {
    let newFileText = ''
    readFile(string1, (text) => {
        newFileText += text
        readFile(string2, (text) => {
            newFileText += text
            readFile(string3, (text) => {
                newFileText += text
                printFileCallBack(newFileText)
            }
        }
    }
}

这就很难推断函数下面会发生什么,同时也很难处理各种场景下发生的错误,比如其中某个文件不存在的情况。

 

Promise 改善了这种情况

这正是 Promise 的优势所在,Promise 是对还未产生的数据的一种推理。Kyle Simpson 将 Promise 解释为:就像在快餐店里点餐一样。

  • 点餐
  • 为所点的午餐付费,并拿到排队单号
  • 等待午餐
  • 当你的午餐准备好了,会叫你的单号提醒你取餐
  • 收到午餐

正如上面的这种场景,当你等餐时,你是无法吃到午餐的,但是你可以提前为吃午餐做好准备。你可以进行其它事情,此时你知道午餐就要来了,虽然此刻你还无法享用它,但是这个午餐已经“promise”给你了。这就是所谓的 promise,表示一个最终会存在的数据的对象。

readFile(file1)
    .then((file1-data) => { /* do something */ })
    .then((previous-promise-data) => { /* do the next thing */ })
    .catch( /* handle errors */ )

上面是 Promise 语法。它主要的优点就是可以将队列事件以一种直观的方式链接在一起。虽然这个示例清晰易懂,但是还是用到了回调。Promise 只是让回调显得比较简单和更加直观。

 

最佳方式:async / await

若干年前,async 函数纳入了 JavaScript 生态系统。就在上个月,async 函数成为了 JavaScript 语言的官方特性,并得到了广泛支持。

async 和 await 是建立在 Promise 和 generator上。本质上,允许我们使用 await 这个关键词在任何函数中的任何我们想要的地方进行暂停。

async function logger() {
    // pause until fetch returns
    let data = await fetch('http://sampleapi.com/posts')
    console.log(data)
}

上面这段代码运行之后,得到了想要的结果。代码从 API 调用中记录了数据。

这种方式的好处就是非常直观。编写代码的方式就是大脑思考的方式,告诉脚本在需要的地方暂停。

另一个好处是,当我们不能使用 promise 时,还可以使用 try 和 catch:

async function logger ()  {
    try {
        let user_id = await fetch('/api/users/username')
        let posts = await fetch('/api/`${user_id}`')
        let object = JSON.parse(user.posts.toString())
        console.log(posts)
    } catch (error) {
        console.error('Error:', error)
    }
}

上面是一个刻意写错的示例,为了证明了一点:在运行过程中,catch 可以捕获任何步骤中发生的错误。至少有三个地方,try 可能会失败,这是在异步代码中的一种最干净的方式来处理错误。

我们还可以使用带有循环和条件的 async 函数:

async function count() {
    let counter = 1
    for (let i = 0; i < 100; i++) {
        counter += 1
        console.log(counter)
        await sleep(1000)
    }
}

这是一个很简答的例子,如果运行这段程序,将会看到代码在 sleep 调用时暂停,下一个循环迭代将会在1秒后启动。

 

要点和细节

相信我们已经感受到了 asyns 和 await 的美妙之处,接下来让我们深入了解一下细节:

  • async 和 await 建立在 Promise 之上。使用 async,总是会返回一个 Promise。请记住这一点,因为这也是容易犯错的地方。
  • 当执行到 await 时,程序会暂停当前函数,而不是所有代码
  • async 和 await 是非阻塞的
  • 依旧可以使用 Promise helpers,例如 Promise.all( )

正如之前的示例:

async function logPosts ()  {
    try {
        let user_id = await fetch('/api/users/username')
        let post_ids = await fetch('/api/posts/<code>${user_id}')
        let promises = post_ids.map(post_id => {
            return  fetch('/api/posts/${post_id}')
        }
        let posts = await Promise.all(promises)
        console.log(posts)
    } catch (error) {
        console.error('Error:', error)
    }
}
  • await 只能用于声明为 async 的函数中
  • 因此,不能在全局范围内使用 await

如下代码:

// throws an error
function logger (callBack) {
    console.log(await callBack)
}

// works!
async function logger () {
    console.log(await callBack)
}

 

现已正式可用

到2017年6月,几乎所有浏览器都可以使用 async 和 await。为了确保你的代码随时可用,则需要使用 Babel 将你的 JavaScript 代码编译为旧浏览器也支持的语法。

如果对更多ES2017内容感兴趣,请访问ES2017特性的完整列表

JavaScript 开发工具推荐

SpreadJS 纯前端表格控件是基于 HTML5 的 Java 电子表格和网格功能控件,提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能,适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。

原文链接:https://css-tricks.com/using-es2017-async-functions/

转载请注明出自:葡萄城控件

© 著作权归作者所有

共有 人打赏支持
葡萄城控件技术团队

葡萄城控件技术团队

粉丝 321
博文 485
码字总数 692522
作品 13
西安
高级程序员
加载中

评论(16)

曾建凯
曾建凯
async真的让js开发有了可以和现有编程语言一分天下的意思。匿名函数和promise实在差点意思。
gonnavis
gonnavis
这功能超赞啊! 我继续用Promise。
J
JhonWei
打赏成功,飘窗居然显示支付失败,什么APP哦
雷兽
async awiat 最初绝对不是出现在c# .net里 但是常见语言里最早推广这个的是微软.net c# 没错。。。
angelboy
angelboy

引用来自“Klaus88”的评论

引用来自“angelboy”的评论

引用来自“sikele2237”的评论

当年喷这玩意的人海了去了,一个个都显得很牛逼,说这事语法糖没用,现在都没啥声音了
对啊,出的晚至少出了,用了aa之后觉得co真特么s b

@angelboy co哪里s b了?
用用aa后知道啊,co太繁琐了
Klaus88
Klaus88

引用来自“angelboy”的评论

引用来自“sikele2237”的评论

当年喷这玩意的人海了去了,一个个都显得很牛逼,说这事语法糖没用,现在都没啥声音了
对啊,出的晚至少出了,用了aa之后觉得co真特么s b

@angelboy co哪里s b了?
BruceWan
BruceWan
C# 确实有许多先进的语言思想
xioxin
xioxin
最后不忘加个广告
伊森
伊森

引用来自“Fenying”的评论

在TS里已经用了很久了
下定决心切TS了
angelboy
angelboy

引用来自“sikele2237”的评论

当年喷这玩意的人海了去了,一个个都显得很牛逼,说这事语法糖没用,现在都没啥声音了
对啊,出的晚至少出了,用了aa之后觉得co真特么s b
ES2017异步函数现已正式可用

ES2017标准已于2017年6月份正式定稿了,并广泛支持最新的特性:异步函数。如果你曾经被异步 JavaScript 的逻辑困扰,这么新函数正是为你设计的。 异步函数或多或少会让你编写一些顺序的 Java...

powertoolsteam ⋅ 2017/08/21 ⋅ 0

JavaScript异步编程大冒险: Async/Await

Async/Await 是什么?Async/Await 也就是大家知道的异步函数,它是一个用来控制 JavaScript 异步流程的一个记号。而在很多现代浏览器上也曾实现过这样的设想。它的灵感来源于C# 和 F#,现在 ...

沉迷学习中 ⋅ 2017/12/21 ⋅ 0

《ES6 标准入门(第3版)》上市了!

2017年6月,TC39 委员会正式发布了《ES2017 标准》。 相比两年前,JavaScript 语法有了很大的升级,主要是引入了 async 函数和 decorator。这让我觉得,《ES6 标准入门》必须要出新版,否则就...

阮一峰 ⋅ 2017/09/19 ⋅ 0

Nest.js 5 正式版:基于 TypeScript 的 Node.js 微服务框架

Nest.js 5 正式版发布了,Nest.js 是基于 TypeScript 面向切面编程的 Node.js 微服务框架,主要改进内容包括: 功能特性 core:支持异步生命周期钩子(OnModuleInit和OnModuleDestroy)#569...

左华栋 ⋅ 05/15 ⋅ 14

玩转异步 JS :async/await 简明教程(附视频下载)

课程介绍 在软件开发领域,简洁的代码 => 容易阅读的代码 => 容易维护的代码,而 ES2017 中的 async/await 特性能让我们编写出相比回调地狱和 Promise 链式调用更直观、更容易理解的代码,a...

王仕军 ⋅ 2017/11/10 ⋅ 0

开发者工具又加了什么好东西?(Chrome 68)

转载自 blog.vvvvvvvvvvvvvvv.com/2018/05/28/… 由 Chrome官方文章 翻译, 建议查看英文原文, 作为程序员, 读懂官方文档应当是必备的技能(因为译文包含了译者的思维, 不一定能精确的表达原文...

15v网技术负责人 ⋅ 05/31 ⋅ 0

Modern JS中的流控制:CallBacks->Promises->Async/Await

今天来聊一聊JS中的异步发展,还有推荐的异步调用写法. 单线程模式 JS运行在一个单处理线程上运行。当你操作一个标签时,其他的JS代码就会等待该操作执行完毕。浏览器的DOM操作不会发生在并行...

含笑666 ⋅ 06/06 ⋅ 0

经 16 年的开发后 SciPy 正式发布 1.0 版本

16 年的开发后 SciPy 正式发布 1.0 版本,SciPy (pronounced "Sigh Pie") 是一个开源的数学、科学和工程计算包。 SciPy 1.0版本的一些亮点是: 主要构建改进。 Windows平台首次在PyPI上可用,...

周其 ⋅ 2017/11/05 ⋅ 6

Syllable Desktop 0.6.7 发布

RC版经两个月的测试后,Syllable 项目正式发布了Syllable Desktop 0.6.7。发行注记详细描述了诸多的变更和新增功能,比如Syllable 中的首个3D功能(如下图)的加入。其他亮点包括,REBOL 3 和...

xyxzfj ⋅ 2012/04/17 ⋅ 0

[repo tutorialzine |译]The Languages, Frameworks and Tools You Should Learn in 2017

(author| Martin Angelov) original The software development industry continues its relentless march forward. In 2016 we saw new releases of popular languages, frameworks and ......

phala ⋅ 2016/12/12 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

IDEA PermGen space内存溢出

解决方案: File -> Settings -> Build, Execution, Deployment / Build Tools / Maven / Runner下,找到VM Options选项,默认是空的,改为如下内容(或更大值)...

快乐的小火柴 ⋅ 7分钟前 ⋅ 0

前端常见跨域解决方案

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: <link>、<script>、<im...

临江仙卜算子 ⋅ 8分钟前 ⋅ 0

系统管理命令service

service命令用来控制系统服务的实用工具,例如启动、停止、重启和关闭系统服务,以及当前状态。当然也可以直接操作,例如/etc/init.d/mysqld restart等。 语法 service (选项)(参数) 选项...

Jpchina ⋅ 13分钟前 ⋅ 0

MySQL 联合索引的命中规则

为什么要用联合索引? 对于查询语句“SELECT T.* FROM T WHERE T.c1=1 AND T.c3=2”涉及到两列,这个时候我们一般采用一个联合索引(c1, c3);而不用两个单列索引,这是因为一条查询语句往往应...

hensemlee ⋅ 20分钟前 ⋅ 0

Spring 自动组件扫描

通常情况下都是在XML配置文件中手动声明Bean和组件的。不过Spring也可以自动扫描组件实例化Bean,这样就可以避免在XML文件中繁琐的Bean声明。 手动声明Bean: 这里不再啰嗦,就是简单地在XML...

霍淇滨 ⋅ 25分钟前 ⋅ 0

MapReduce简单需求分析-共同好友及查找互粉的情况

MapReduce的设计,最重要的是要找准key,然后制定一系列的数据处理流程。MapReduce的Map中,会把key相同的分配到同一个reduce中,对于key的选择,可以找到某个相同的因素。以下面的几个例子说...

Jason_typ ⋅ 27分钟前 ⋅ 0

springboot多数据源自动切换

SpringBoot多数据源切换,先上配置文件: 1.pom: <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20......

JackyRiver ⋅ 29分钟前 ⋅ 0

Boost库编译应用

版本:Boost 1.66.0 Windows库编译 官网指南:直接执行bootstrap.bat处理文件即可,可以我却遇到一堆的问题。 环境:Windows 10 + Visual Studio 2017 Boost编译出来库命名 boost库生成文件命...

水海云 ⋅ 33分钟前 ⋅ 0

解决Eclipse发布到Tomcat丢失依赖jar包的问题

如果jar文件是以外部依赖的形式导入的。Eclipse将web项目发布到Tomcat时,是不会自动发布这些依赖的。 可以通过Eclipse在项目上右击 - Propertics - Deployment Assembly,添加“Java Build ...

ArlenXu ⋅ 33分钟前 ⋅ 0

iview tree组件层级过多时可左右滚动

使用vue+iview的tree组件,iview官网iview的tree树形控件 问题描述:tree层级过多时左右不可滚动 问题解决:修改overflow属性值 .el-tree-node>.el-tree-node_children { overflow: vi...

YXMBetter ⋅ 35分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部