随着前端开发越来越复杂，异步编程显得愈发重要。然而，在过去的 JavaScript 版本中，异步代码的编写通常需要嵌套的回调函数，导致代码可读性变差且难以维护。现在，ES12 中的 Generator 对象提供了一种更简单和可读性更高的方式来编写异步代码。
Generator 是一种特殊类型的函数，可以通过遵循一组特定的规则来控制函数执行。它可以在稍后的时间继续执行，因此可以帮助我们更简单地组织异步代码。
Generator 对象的使用
Generator 函数可以暂停执行，让调用方通过 yield 操作返回一个值，并在稍后通过调用 next() 方法来继续执行。这使得 Generator 函数极其适合控制异步流程。
下面是一个使用 Generator 实现异步调用的示例代码：
-- -------------------- ---- ------- --------- ----------- - ----- ------- - ----- --------------------------------------- ----- ------- - ----- --------------------------------------- -------------------- --------- - ----- ------------- - ------------ ------------------------------------- -- - ------ -------------------------------- ------------- -- - -------------------------- ---
在这个示例代码中，我们定义了一个 Generator 函数 fetchData，该函数使用 yield 关键字来控制异步调用。首先，我们通过 yield 关键字暂停了异步调用，以便我们可以访问 fetch 返回的 Promise 对象。在第二次调用 next() 方法时，我们通过传递上一次调用获取的数据来恢复异步调用的执行。
使用 Async/Await
虽然 Generator 可以帮助我们以更简洁和可读性更高的方式编写异步代码，但在实现一些常见的异步编程模式时，它可能会变得有些笨重。幸运的是，ES8 中引入了更直观的 Async/Await 语法，它可以用于更有条理地编写异步代码。
下面是同样的示例代码，在使用 Async/Await 语法时更清晰：
async function fetchData() {
const result1 = await fetch('https://api.example.com/data1');
const result2 = await fetch('https://api.example.com/data2');
console.log(result1, result2);
}
fetchData();总结
Generator 和 Async/Await 语法是编写可读性更高的异步 JavaScript 代码的强大工具。虽然 Generator 在某些情况下可能具有一些冗余，但它仍然是一个非常有用的工具，可以帮助我们更有效地处理异步代码。
当您开发更复杂的应用程序并需要更好地控制异步流程时，请考虑使用 Generator 和 Async/Await 语法来帮助减少您的代码嵌套，从而使其更易于理解和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ea03d48841e9894b28551