前言
在前端开发中，我们常常使用异步编程，例如 Ajax 请求、setTimeout、setInterval 等等，这些操作都是异步的。但是异步编程带来的问题是回调地狱（callback hell），即回调函数嵌套层次很深，代码可读性差，维护起来困难。为解决这个问题，ES6 引入了 Promise 和 Generator 函数，它们的联手可以让我们的异步编程更加简洁和优雅。
Promise
Promise 是一种异步编程的解决方案，最早由 CommonJS 规范提出，现在已被 ES6 引入标准库。它用于表示一个异步操作的最终完成或者失败，以及它的结果值。
一个 Promise 实例可以处于三种状态中的一种：pending（等待状态）、fulfilled（成功状态）、rejected（失败状态）。当 Promise 实例状态从 pending 转变为 fulfilled 或者 rejected 时，就会触发 .then 方法注册的回调函数。
以下是一个 Promise 的示例代码：
----- ------- - --- ----------------- ------- -- -
-- ----
------------- -- -
----- ---- - -------------
-- ----- - ---- -
---------------------
- ---- -
--------------------
-
-- -----
--
-------
--------- -- -----------------
------------ -- ---------------------该示例代码中，new Promise 接受一个参数——回调函数，该回调函数会在异步操作结束后被执行。回调函数接受两个参数——resolve 和 reject，它们分别表示异步操作成功和失败。如果异步操作成功，调用 resolve 并传递结果值。如果异步操作失败，调用 reject 并传递错误原因。
当 Promise 实例状态转变为成功状态时，执行 .then 方法注册的回调函数。当 Promise 实例状态转变为失败状态时，执行 .catch 方法注册的回调函数。
Generator 函数
Generator 函数是 ES6 引入的一种新的函数类型。它的主要特点是可以控制函数的执行，将函数的执行分割成多段，使得函数执行过程中能够停止、恢复、暂停，从而方便地实现异步编程。
function*声明了一个 Generator 函数。Generator 函数在调用时并不会立即执行，而是返回一个 Generator 对象；- 调用
next()方法可以让 Generator 函数一步一步地执行； - Generator 函数在暂停时可以将其当前的执行环境保存下来，等到下一次调用
next()方法时，再继续上次的执行状态。
以下是一个 Generator 函数的示例代码：
--------- --------------------- - ----- ------- ----- ------- ------ -------- - ----- -- - --------------------- ---------------------- -- - ------ -------- ----- ----- - ---------------------- -- - ------ -------- ----- ----- - ---------------------- -- - ------ --------- ----- ---- - ---------------------- -- - ------ ---------- ----- ---- -
该示例代码中，helloWorldGenerator() 是一个 Generator 函数，它返回一个 Generator 对象。next() 方法可以使 Generator 函数从上次暂停的地方恢复执行。通过 yield 来控制 Generator 函数的执行流程，并且可以在 return 语句返回最终结果。在运行过程中如果没有遇到新的 yield 语句，就会结束 Generator 函数的执行。
Promise 和 Generator 函数的联手可以让我们的异步编程更加简洁和优雅。通过利用 yield 向异步操作添加额外的控制结构，使得异步操作可以像同步操作一样顺序执行，同时让回调函数转换为单独的协程，从而避免回调地狱。
以下是一个利用 Promise 和 Generator 函数实现的异步加载图片的示例代码：
-------- -------------- -
------ --- ----------------- ------- -- -
----- --- - --- -------
---------------------------- -- -- -
------------
--
----------------------------- -- -- -
---------- -----------------------
--
------- - ---
--
-
--------- ----- -
----- ---- - ---------------------------
----- ---- - ---------------------------
----- ---- - ----- ---------------
---------------------------
----- ---- - ----- ---------------
---------------------------
-- -- ------
-
----- - - -----
----- ------- - --- -- -
------------------------- -- -------------
-
---------该示例代码中，loadImage() 函数是一个异步加载图片的函数。通过 new Promise 返回一个 Promise 实例，当图片加载完成时，调用 resolve 通知 Generator 函数，否则调用 reject 抛出错误。 gen() 函数是一个 Generator 函数，用于表示按顺序加载文件的逻辑。通过 yield 控制异步操作的执行流程，从而使代码更加简洁易读。
实现异步操作后，我们需要通过 next() 方法开始执行任务。由于 next() 方法只会执行一次 Generator 函数，因此需要借助一个递归函数 loadImg 辅助实现多次调用。递归函数的参数是图片的 URL。每次调用递归函数时都会调用 next() 方法。只有在 Promise 实例的状态转变为 fulfilled 时，图片加载才算完成。因此必须在 Promise 的 resolve 回调中继续调用递归函数，直到所有图片都已加载完成。
总结
Promise 和 Generator 函数是 ES6 引入的两个重要的语言特性，它们分别用于解决异步编程和控制函数的执行。将它们联手使用可以使异步操作执行顺序更加清晰、代码更加简洁，并且避免了回调地狱的问题。希望你能够善用 Promise 和 Generator 函数，写出更优雅的异步代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66581cf1d3423812e4de9579