在 ECMAScript 2017 中，新增了一个非常重要的特性：Async Functions。Async Functions 是一种便捷且清晰的异步编程方法，它结合了 Promise 和 Generator 的优点。使用 Async Functions，我们可以让异步编程变得更加简单和易于理解。
Async Functions 是什么？
在理解 Async Functions 之前，需要先理解 Promise 和 Generator。
Promise
Promise 是 JavaScript 异步编程的一种解决方案。它是一个容器，保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
-- -------------------- ---- -------
--- ------- - --- ----------------- ------- -- -
------------- -- -
--------------
-- ------
---
-------------------- -- -
---------------- - - -------
---------------- -- -
---------------- - - -------
---上面的代码中，我们定义了一个 Promise 对象，它会在 1 秒后返回成功的结果。我们通过 .then() 方法来监听 Promise 对象的状态并处理成功的结果，.catch() 方法来处理失败的情况。
使用 Promise 可以让我们更加优雅地处理异步回调函数。但是，当需要处理多个 Promise 时，使用 Promise 链式调用来处理所有 Promise 往往会导致代码可读性下降，出现回调嵌套等问题（即所谓的 Promise hell）。
Generator
Generator 是 ES6 中的一个新的特性，它与 Promise 一起组成了一种异步编程解决方案。通过 Generator，我们可以控制异步函数的执行过程，使得异步函数的执行过程更清晰和可控。
-- -------------------- ---- -------
--------- ----- -
----- ------- - ----- ------------------------
----- ------- - ----- ------------------------
----- ------- - ----- ------------------------
------ --------- -------- ---------
-
----- -------- - ------
-- --------
-------- ------------- ----------- - ---------- -
----- ---- - ---------------------------
-- ------------ -
------------- ------------
- ---- -
------------------------ - ------------
-
-
--------------上面的代码中，我们定义了一个 Generator 函数 foo，它由三个异步函数组成。我们通过 run() 方法来递归调用异步函数，保证每个异步函数的返回结果被正确处理。
虽然 Generator 可以更加优雅地处理异步函数调用，但是对于异步函数的执行过程，并没有提供明确的解决方案。我们仍然需要手动来控制异步函数的执行次序和处理结果。
Async Functions
Async Functions 是 Generator 和 Promise 的简化版，它是异步编程中的一种解决方案，可以让异步编程变得更加简单和易于理解。
-- -------------------- ---- -------
----- -------- ----- -
--- -
----- ------- - ----- ------------------------
----- ------- - ----- -------------------------------
----- ------- - ----- ------------------------------ ---------
------ --------- -------- ---------
- ----- ------- -
------------------- - -------
----- ------
-
-
------------------ -- -
------------------- - -------
---上面的代码中，我们定义了一个 Async Function foo，它与 Generator 函数非常相似。但是，在 Async Function 中，我们使用了 async 和 await 关键字，让异步调用变得更加清晰和直观。
使用 Async Functions 可以让异步编程变得更加清晰和易于理解。它充分利用了 Promise 的优点，同时避免了 Promise 链式调用所带来的困难和复杂性。我们可以通过更加直观和简洁的方式来处理异步函数的调用和返回结果。
使用 Async Functions
使用 Async Functions，我们需要注意以下几点：
1. 定义 Async Functions
要定义 Async Function，需要在函数名前添加 async 关键字。Async Function 可以有返回值，也可以是一个 Promise 对象。
-- -------------------- ---- ------- -- ----- -------- ---- ----- -------- ----- - ------ ------ ------- - -- ----- -------- -- ------- -- ----- -------- ----- - ------ ---------------------- -------- -
2. 处理异步函数调用
在 Async Function 中，我们可以直接使用 await 关键字来处理异步函数的调用。await 关键字会让程序等待异步函数的执行结果，并将结果返回。
async function foo() {
const result = await asynchronousFunction();
console.log(result);
}3. 处理异常情况
在 Async Function 中，我们可以使用 try-catch 语句来处理异步函数的异常情况。如果程序执行过程中出现异常，会跳转到 catch 语句中进行处理。
async function foo() {
try {
const result = await asynchronousFunction();
console.log(result);
} catch (error) {
console.log("发生错误：" + error);
}
}4. 对多个异步函数进行调用
在 Async Function 中，我们可以使用 Promise.all() 方法来对多个异步函数进行调用，并且在所有异步函数执行完成后统一处理返回结果。
async function foo() {
const [result1, result2, result3] = await Promise.all([
asynchronousFunction1(),
asynchronousFunction2(),
asynchronousFunction3()
]);
console.log(result1 + result2 + result3);
}示例代码
-- -------------------- ---- -------
-- ------
-------- ----------- -
------ --- ----------------- -- -
------------------- ------
---
-
----- -------- ----- -
--- -
-- ----
------------------------
----- ------- - ----- ------------
-------------------------
----- ------- - ----- ------------
-------------------------
----- ------- - ----- ------------
-------------------------
-- ------
------------------- - -------- - ------- - ----------
- ----- ------- -
-- ------
------------------- - -------
-
-
------运行结果：
开始执行异步调用 执行第一步异步调用 执行第二步异步调用 执行第三步异步调用 返回结果：undefined
上面的例子中，我们定义了一个异步函数 delay，它会等待指定时间后返回结果。在 Async Function 中，我们使用 await 关键字来调用异步函数，并使用 try-catch 语句来处理异常情况。最终，我们对所有的异步函数进行调用，并在所有异步函数执行完成后处理返回结果。
总结
Async Functions 是 ECMAScript 2017 中的一个非常重要的特性，可以让异步编程变得更加简单和易于理解。使用 Async Functions，我们可以避免 Promise 链式调用所带来的复杂性和困难，以一种更加直观和简洁的方式来处理异步函数的调用和返回结果。同时，在 Async Functions 中，我们可以使用 try-catch 语句来处理异常情况，使用 Promise.all() 方法来对多个异步函数进行调用。从整个异步编程的角度来看，Async Functions 是一种非常实用和简洁的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6478147e968c7c53b045a0b0