文档章节

ES2017异步函数现已正式可用

葡萄城技术团队
 葡萄城技术团队
发布于 2017/08/21 13:46
字数 1618
阅读 5.5K
收藏 72

码上生花,ECharts 作品展示赛正式启动!>>>

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/

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

© 著作权归作者所有

葡萄城技术团队

葡萄城技术团队

粉丝 428
博文 636
码字总数 998997
作品 20
西安
高级程序员
私信 提问
加载中
此博客有 16 条评论,请先登录后再查看。
ES2017异步函数现已正式可用

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

powertoolsteam
2017/08/21
0
0
JavaScript ES2017 中值得期待的功能

由于ES6 / ES2015花了大约6年的时间,才得以发布,因此负责JavaScript语言规范的技术委员会TC39,决定按年度周期来发布ES。这种变化允许ES语言规范,以更小和更迭代的版本形式进行发布。这样...

葡萄城技术团队
2017/06/14
0
0
【TypeScript 演化史 -- 5】将 async/await 编译到 ES3/ES5 (外部帮助库)

作者:Marius Schulz 译者:前端小智 来源:Marius Schulz 阿里云最近在做活动,低至2折,真心觉得很划算了,可以点击本条内容或者链接进行参与: promotion.aliyun.com/ntms/yunpar… 腾讯云...

前端小智
2019/11/25
0
0
ES2017 —— async await原理

Generator不熟悉的人,可以先看下Generator的文档:developer.mozilla.org/zh-CN/docs/… 前言 在ES2017之前,我们要想把一段异步逻辑编程按照同步代码的方式来编写,需要依赖Generator,比如...

混沌传奇
2019/05/26
0
0
好程序员web前端分享详细了解JavaScript函数

好程序员web前端分享详细了解JavaScript函数,如果你曾经接触过JavaScript编程,你一定不会陌生如何定义并且调用一个函数。但是你知道在JavaScript中有多少种定义函数的方法吗?如果想要在T...

好程序员IT
2019/04/10
6
0

没有更多内容

加载失败,请刷新页面

加载更多

JeecgBoot 连接达梦数据库

JeecgBoot连接达梦数据库 一、达梦数据库官网下载地址 http://www.dameng.com/down.aspx?TypeId=11&FId=t14:11:14 项目采用DMB8开发版(windows64位) 二、需要两个jar,可在达梦数据库安装...

JEECG开源社区
33分钟前
24
0
迅捷CAD转换器好不好用?

大家在工作中有掌握一些必备的CAD小技巧吗?比如怎么实现DWG与DXF互转?我们应该使用什么工具?下面小张给大家带来一款实用软件(迅捷CAD转换器)的图文教程分享,有兴趣和有需要的小伙伴们仔...

逆风小师傅
34分钟前
15
0
gitee仓库管理入门

gitee就是码云。只是入门笔记。 1.gitee注册,git下载安装。这个简单就不说了。 查看git配置: git config --list 配置用户名 邮箱 密码 git config --global user.name "用户名"git co...

仙游度尾东峰黄恩赐
35分钟前
11
0
Linux初学之bash相关

bash的颜色显示规则: ascll编码对于颜色进行设置 \033: ctrl键 [ :控制字符和颜色代码之间的间隔字符 0m:关闭颜色属性的命令 1m:对于显示的文本字符进行加粗 4m:为文本字符加下划线标识...

osc_umiwij2c
35分钟前
13
0
linux初学之——权限管理

上篇已经提到用户和组的管理相关知识,我们已经学会了如何在Linux系统中创建了用户和组,并对用户和组的内容和属性做一些修改。但是我们知道Linux系统是多用户多任务的操作系统,多个合法用户...

osc_znv7pwo3
37分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部