在 JavaScript 的异步编程中，ES6 为我们带来了很重要的一步，包括 Promise、Generator 和 async/await 函数。其中，Generator 函数和 async 函数被广泛应用于日常开发中。本文将对这两种函数进行深入的区别分析，让读者更好的理解它们。
Generator 函数的使用与规则
Generator 函数是 ES6 其中一个重要的新特性。一个常规的函数一次性执行完毕返回一个值，而 Generator 函数产生的是一个可迭代的对象，通过回调（next()）的方式来控制函数执行的方式。
-- -------------------- ---- -------
--------- ------ -
----- --
----- --
----- --
-
----- -- - -------
----------------------------- -- -
----------------------------- -- -
----------------------------- -- -async/await 的使用与规则
async 函数是 ES8 中引入的一个关键字。async 函数内部默认返回一个 Promise 对象。和 Generator 函数一样，async 函数中的代码也可以使用 yield 进行控制。
async function af() {
await new Promise(resolve => setTimeout(resolve, 1000)); // 等待 1 秒钟
return 2;
}
af().then(v => {
console.log(v); // 输出 2
});区别分析
除了语法的不同，二者之间在代码的表现和可扩展性上也存在明显的差异：
1. 内部执行器
Generator 函数的内部执行器是手动进行回调控制的，而 async 函数的控制器则是通过自动完成异步代码来实现的。
2. 外部影响
Generator 函数的执行过程可以由外部控制，而 async 函数默认不行。但是，async 函数本质上是 Promise 的语法糖，所以在某些应用场景中，它们的使用方式存在一些复杂情况。
3. 返回值
Generator 函数经过回调控制返回的是一个可迭代对象，可以在函数体内任何时候通过 yield 来终止执行，并随时返回值；而 async 函数经过回调控制返回的是 Promise 对象，并且 Promise 实例的 then 方法能够接受该实例返回的任何值。
因此，当需要使用大量的异步编程时，async 函数将是最佳选择；而当处理通用的异步控制流程时，就应该使用 Generator 函数。
示例代码
-- -------------------- ---- -------
--------- ------ -
----- --- - ---------------------------------------------
----- -------- - ----- -----------
----- -------- - ----- ----------------
------------------------------
-
----- -- - -------
----- ------ - ----------
------------
---------------- -- -
------ ------------------------
--
------------ -- -
------ --------------------
--
---------- -- ----------------上述代码中，我们通过 Generator 函数来获取 JSONPlaceholder 的数据。这种方式将所有步骤明确地暴露在外，控制更加灵活。
async function af() {
const url = "https://jsonplaceholder.typicode.com/users";
const response = await fetch(url);
const jsonData = await response.json();
console.log(jsonData[0].name);
}
af().catch((e) => console.log(e));而在成为 Async 函数调用后，会自动执行异步请求。因此，在需要执行多个异步批处理的情况下，它比 Generator 函数更加清晰。
结论
在实际开发过程中，async/await 通常比 Generator 函数更容易维护和编写。Async 函数能够消除与 Generator 函数相关的大多数问题和限制，使代码更加简洁易懂。
无论您选择哪种方式，这两种方式都是通过将异步控制流程显式地表现出来，从而使代码更加易于理解和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6718e581ad1e889fe22ec250