应该知道的 ES7 和 ES8 新特性：async/await、async generator 等
随着前端技术的不断升级，JavaScript 也会有不断的更新和改进，来更好地支持开发人员的需求。最近的 ES7 和 ES8 版本中，引入了一些新特性，包括 async/await 和 async generator 等，这些新特性将帮助我们更快、更简单地处理异步任务，提高代码的可读性和可维护性。在本文中，我们将深入探讨这些新特性的细节，并提供一些示例代码。
- async / await
Async/await 是一种让异步代码看起来像同步代码的技术。它是建立在 Promise 之上的，可以更好地处理异步函数调用链。利用 async/await，你可以写出优雅的、易于理解的异步代码。并且，它可以帮助你避免使用回调函数等经典的异步编程模式。
使用 async/await 的函数必须使用 async 关键字进行定义。用法如下：
async function foo() { // ... return result }
在 async 函数内部，可以使用 await 关键字标记一个异步操作，如下所示：
async function foo() { const result = await someAsyncOperation() console.log(result) }
以上代码中，await someAsyncOperation() 表示暂停 foo() 函数的执行，直到 someAsyncOperation() 返回结果或抛出异常为止。当异步操作完成时，result 变量将被设置为异步操作的结果。接着，console.log(result)将被调用，打印出结果。
下面是一个更完整的例子，它包括连续两个异步操作的串联：
-- -------------------- ---- ------- ----- -------- ----- - --- - ----- -------- - ----- ------------------------------------- -- ------- ----- ---- - ----- --------------- -- ------- ----------------- -- ---- - ----- ------- - -------------------- -- ---- - -展开代码
在这个例子中，fetch('http://example.com/data.json') 是一个异步操作，它返回一个 Promise。当 Promise 被解决时，response.json() 也将返回一个 Promise，解决时将返回数据。通过使用 await 关键字，fetch 和 response.json 这两个异步操作都可以像同步操作一样执行。
- async generator
ES8 还引入了 async generator，它允许你使用类似生成器的语法来生成异步结果序列。这是一个新的功能，它将异步代码中的生成器和 Promises 结合起来，以便更好地处理异步操作。使用 async generator，你可以写出具有可读性和易于调试的代码。
async generator 使用 async function* 关键字来定义。下面是一个简单的示例，它生成一个数字序列：
async function* numbers() { let index = 0 while (true) { yield index++ } }
我们可以通过迭代这个序列来获取数字。下面是一个简单的示例，它使用 for-await-of 循环迭代数字，以便异步地打印它们：
async function printNumbers() { for await (const number of numbers()) { console.log(number) // 打印数字 } }
在这个例子中，我们使用 for-await-of 循环来迭代 async generator 生成的数字序列。它自动暂停和恢复循环，直到异步操作完成。
结语
ES7 和 ES8 的新特性，使 JavaScript 开发变得更加简单和直观。async/await 和 async generator 较大地改进了异步编程模型，使代码更容易编写和维护。希望本文可以帮助你更好地理解这些特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6784ea8a9137010942f57c44
