什么是生成器函数
在 ES6 中，新增了一种特殊的函数，称之为生成器函数。通过使用 function* 关键字声明，生成器函数可以在函数内部通过 yield 关键字来暂停函数的执行，并且可以在下一次调用时继续执行。
-- -------------------- ---- ------- --------- ------------- - ----- ---- ----- ---- ----- ---- - ----- ---- - -------------- ------------------------- -- - ------ ---- ----- ----- - ------------------------- -- - ------ ---- ----- ----- - ------------------------- -- - ------ ---- ----- ----- - ------------------------- -- - ------ ---------- ----- ---- -
在上面的例子中，我们定义了一个生成器函数 myGenerator()，并在函数体内用 yield 关键字来暂停函数的执行。我们将生成器函数赋值给一个 iter 变量，并通过调用 next() 方法来执行函数。每次调用 next() 方法会执行到下一个 yield 关键字处，返回一个对象，包含一个 value 属性和一个 done 属性。done 表示函数是否执行完毕，value 表示当前执行到的值。
通过使用生成器函数，我们可以更加方便地进行异步编程。
解决异步请求的阻塞问题
在日常的前端开发中，我们通常会遇到进行多个异步请求的情况。当多个异步请求同时进行时，很容易出现请求阻塞的情况，从而导致性能瓶颈或者页面卡顿等问题。
使用生成器函数可以很好地解决这个问题。通过在生成器函数内部调用多个异步请求，并使用 yield 暂停函数的执行，等待异步请求结果返回后再继续执行生成器函数。这样就可以避免多个异步请求同时执行导致的阻塞问题。
-- -------------------- ---- -------
--------- ------------- -
--- -
----- ---- - ----- ---------------------------------------
----- ----- - ----- ------------
----- ---- - ----- ---------------------------------------
----- ----- - ----- ------------
------------------ -------
- ----- ------- -
-------------------
-
-
----- ---- - --------------
-------- ------------------ -
-- ---------------- -
------ ----------
-
------ ---------------------
-------- -- ---------------------------
------- -- --------------------------
--
-
---------------------在上面的例子中，我们定义了一个生成器函数 myGenerator()，并调用了两个异步请求，通过 yield 关键字来暂停函数的执行。然后我们定义了一个 getNext() 函数，用于递归执行生成器函数的每一个 yield 关键字。
在执行 getNext() 函数时，我们首先判断 iteration 是否执行完毕（即 done 是否为 true），如果已经执行完毕，直接返回 iteration。如果没有执行完毕，我们通过 iteration.value.then() 来执行异步请求，并在结果返回后递归调用 getNext() 函数来继续执行生成器函数。
通过使用生成器函数，我们可以很好地解决异步请求的阻塞问题，使得页面或应用更加流畅和高效。
总结
在 ES6 中，生成器函数是一个很有趣和强大的特性，可以帮助我们更好地进行异步编程。通过使用生成器函数，我们可以很方便地在函数内部暂停函数的执行，并在下一次调用时继续执行。在实际开发中，我们可以将生成器函数用于解决异步请求的阻塞问题，提高应用的性能和用户体验。
代码示例可以在 Github 中查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517ad0895b1f8cacdfd7f97