在 JavaScript 开发中，异步编程是必不可少的一部分。ES5 中引入的 Promise 已经大大简化了很多异步编程的代码，但是仍然需要编写大量的 then 方法和回调函数。而在 ES7 中，引入了 Generator 和 Async 函数，使得异步编程变得可读性更高、可维护性更好。
Generator 函数
Generator 函数是 ES6 中强大的新特性，可以帮助实现异步编程。它是一种能够被中断和恢复的函数，通过 yield 语句，可以暂停函数的执行并返回一个值，下次调用时可以继续执行。
以下是一个简单的 Generator 函数的例子：
-- -------------------- ---- -------
--------- --------- -
--- - - --
----- ------ -
----- ----
-
-
----- --------- - ----------
------------------------------------ -- -
------------------------------------ -- -
------------------------------------ -- -如上所示，通过调用 generator 的 next 方法可以依次输出 Generator 中的值。实际上，Generator 函数在异步编程中的使用更为广泛。
Async 函数
Async 函数是 ES7 中的一个新特性，使得异步编程更加简单明了。它是 Generator 函数的语法糖，利用 async 和 await 两个关键字，让异步执行的代码看起来像同步执行的代码一样。
以下是一个简单的异步操作的例子：
async function getData() {
const data = await fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json());
console.log(data);
}
getData();如上所示，async 函数返回的是一个 Promise 对象，通过 await 关键字，可以将异步函数变为同步函数的写法。await 会等待 Promise 完成并返回结果，这样就不需要 then 回调函数了。
Generator 和 Async 函数的区别
虽然 Generator 和 Async 函数都可以实现异步编程，但是它们之间还是存在一些区别的。
首先是语法方式的不同，Generator 函数需要手动在代码中写出所有的 yield 语句，而 Async 函数则是直接用 await 关键字。
其次是执行上下文的不同，Generator 函数的执行上下文并不会一直在代码执行的尾部，而是可以随时通过 yield 关键字在某个代码段中进行中断和恢复。而 Async 函数则会在 await 关键字处停止，并且会让执行上下文继续在下一个代码段中执行。
总结
ES7 和 ES8 中的 Generator 和 Async 函数对于异步编程的实现有着重要意义，使得编写异步代码变得更为简单易懂。通过 Generator 函数可以实现异步执行的暂停和恢复，而 Async 函数则是 Generator 函数的语法糖，使得异步代码看起来像同步执行的代码一样。同时，需要注意两种函数之间在代码语法和执行上下文的不同点，以便更好地进行异步编程的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64584cb5968c7c53b0ab367e