在 ECMAScript 2017 中，发布了 async 函数，这是一个让前端开发者特别感兴趣的技术。本文将会为大家介绍 async 函数的背景、原理和一个实际例子，详细讲解这个特性，并提供学习和指导意义。
什么是 async 函数？
async 是一个关键字，用于定义一个返回值为 Promise 对象的异步函数。async 函数的本质是 Generator 函数加上自动执行器（co 模块的作用）。async 函数使用起来非常方便，它帮助我们使用异步操作变得更简单明了，无需再使用回调函数、Promise 链等复杂形式处理异步操作。
async 函数的原理
async 函数的返回值，是一个 Promise 对象。当函数执行完后，它默认返回一个解析之后的 Promise 对象。如果函数返回了一个值，那么该值将成为这个 Promise 对象的 resolve 值；如果函数抛出异常，那么该异常将成为这个 Promise 对象的 reject 值。
async 函数通过 Generator 函数解决了回调地狱和 Promise 链问题。我们可以将 async 函数理解为一个语法糖，它将代码的异步调用和处理封装到了一个异步函数中。
一个例子
下面介绍一个使用 async 函数的例子：Promise 链改造。
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
---------------------
-----------
-- ------
---
-
-------- ----------------- -
------ --- ----------------- ------- -- -
------------- -- -
---------------------
---- - ---- - --
--------------
-- ------
---
-
-------- -------------- -
------ --- ----------------- ------- -- -
------------- -- -
---------------------
---- - ---- - --
--------------
-- ------
---
-
---------
---------- -- -
------ ------------------
--
---------- -- -
------ ---------------
--
---------- -- -
---------------------- ------
---该代码中的 Promise 链共有 3 个 Promise 实例，用于获取数据、对数据进行处理和保存数据。代码看起来很规范，但是对于复杂的异步操作，代码的层级可能会越来越深，变得难以维护。
现在使用 async 函数重写这个代码：
----- -------- ----------- - --- ---- - ----- ---------- ---- - ----- ------------------ ---- - ----- --------------- --------------------- ------ - ------------
使用 async 函数，代码的整体结构更加清晰，逻辑连贯。我们使用 await 关键字等待每个异步操作完成，并保持操作的顺序，最终返回操作的结果。
学习和指导意义
通过上述例子和分析，大家已经足够了解 async 函数的使用方法和优势。其学习和指导意义如下：
- 熟练使用 async 函数，有助于规范化和简化异步操作处理。
- async 函数对于需要多个异步操作时操作的顺序保证是非常有帮助的，特别是在数据处理中。
- async 函数可以像同步函数一样，方便易懂地调用异步函数。
- 异步函数本质上是 Promise 对象，故可以与 Promise 进行自由转换。
结论
async 函数是 ECMAScript 2017 中的一个重要特性，熟练使用可以大大简化异步操作的代码配置和写法。我们的代码看起来更清晰易懂，逻辑也变得更加连贯清晰。欢迎大家掌握该技术，并将其运用到实际工程和项目的开发中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670de90b5f551281025efbbc