从ES6到ES7：异步编程
在JavaScript中，异步编程是我们使用的基本方法之一。ES6（ECMAScript 2015）在该领域进行了重大改进，并引入了许多新功能，如Promise和async/await。ES7（ECMAScript 2016）也通过async generator继续了扩充。
在本文中，我们将一步一步地介绍这些概念，深入了解这些新功能如何简化异步编程并提高JavaScript应用的性能。
Promise
由于JavaScript中的回调会导致代码混乱和难以理解，Promise被引入以使异步编程更容易、更直观。Promise实际上是一个代表尚未完成但带有状态的异步操作的对象。一个Promise对象可以有三种状态：
- 初始状态：尚未完成，并且也不可用（等待状态）。
- 已完成：操作成功完成，该结果可用（已解决状态）。
- 已拒绝：操作失败，原因可用（已拒绝状态）。
Promise具有以下特点：
- Promise对象可用于异步函数中，用于表示异步完成。
- Promise对象具有状态，当异步完成时，Promise状态是“已完成”或“已拒绝”状态。
- Promise对象可以连续链式调用。
下面是一个使用Promise的例子，该函数将等待两个异步操作完成后，才会处理结果：
-- -------------------- ---- -------
-------- ------------------ -
------ ---------------
---------- -- -
------ -------------------
--
----------- -- -
------ -
--------- -----
------ -----
--
---
-在此示例中，将首先查询名称，然后在返回名称后，查询用户帖子。两个异步操作都完成后，将返回数据。
async/await
Async和await是ES6中添加的另一个功能，它们进一步简化了Promise的使用。Async函数本身总是返回一个Promise对象。同时，使用async/await还可以用与同步编程类似的方法编写异步代码。以下是一个使用async/await的示例：
async function getUserDetails(id) {
const name = await getUserName(id);
const posts = await getUserPosts(name);
return {
username: name,
posts: posts
};
}在此示例中，如果Promise处于等待状态，它将等待操作完成，然后可以访问操作结果。
Async generator
ES7引入了async generator。在ES7中，async generator是指返回在异步fucntion中yield的Promise的生成器。这将最终简化生成器的异步流控制。以下是一个示例：
-- -------------------- ---- -------
----- -------- ------------------------ -
--- --- - --
----- ------ -
----- ------
----- --- --------------- -- ------------------- -------
-
-
----- -------- -------------------- -
----- --------------- - ------------------------
----------------- ------------------------
----------------- ------------------------
----------------- ------------------------
-
---------------------在此示例中，我们创建了一个使用async generator的生成器，并在其上调用“next”方法。异步生成器返回每个Promise，以产生生成器中的下一个值。在每次调用“next”时，必须使用“await”获得异步生成器的下一个值。
结论
异步编程的重要性不言而喻。JavaScript中的大多数库都支持异步编程模型，因此简单且可维护的异步编程代码是至关重要的。ES6和ES7增加了更多的功能，以帮助使JavaScript的异步编程更加容易和优雅。这些新功能提高了JavaScript应用程序的性能，并大大简化了编写异步代码的过程。
在实际项目中，应尽可能使用新的异步编程方式，在合适的地方使用async/await和Promise以减少代码复杂性，并提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbfc6f44713626016766f4