在 ES6 中使用生成器函数与 Promise 实现异步编程
前置知识
在进入本文主题之前，我们需要先了解一些 JavaScript 基础知识。具体来说，需要了解的内容有：
- 函数的概念和使用方法
- JavaScript 异步编程模型
- Promise 的使用方法
- 生成器函数的概念和用法
如果您对这些内容还不熟悉，建议先学习相关基础知识后再阅读本文。
ES6简介
ES6（又称 ECMAScript 2015）是 JavaScript 的一个重要更新，它引入了很多新的语法和特性。ES6 的一个重要目标是让 JavaScript 更易于编写和维护，同时提高代码执行效率。
ES6 编写异步代码的传统方式
在 ES6 之前，编写异步代码通常使用回调函数。例如，我们可以使用 XMLHttpRequest（XHR）对象从服务器上获取数据：
-- -------------------- ---- -------
-------- ------------ --------- -
--- --- - --- -----------------
---------------------- - ---------- -
-- --------------- --- -- -
---------------------------
-
--
--------------- -----
-----------
-在这个例子中，request 函数接收一个 URL 和一个回调函数作为参数。当请求完成时，XHR 对象的状态将变为 4（即完成），然后将回调函数的参数设置为响应文本（如果请求成功）或错误消息（如果请求失败），然后将其调用。
这种方式编写了许多异步函数，但由于回调的嵌套和潜在的竞态条件等问题，这种方式很容易导致代码难以阅读和维护。
ES6 中生成器函数的概念
ES6 中引入了一个新的语法，称为生成器函数。生成器函数可以暂停并继续执行它们的代码，这使得它们非常适合用于异步编程。生成器函数使用星号 (*) 表示，其中通过 yield 语句将控制权在函数和调用者之间传递。
下面是一个简单的生成器函数示例：
function* generator() {
console.log('First');
yield;
console.log('Second');
return 'Finished';
}在这个例子中，generator 函数包含两个 console.log 语句和一个 yield 语句，它将控制权传递给与它协作的其他代码。
使用生成器函数实现异步编程
生成器函数的主要优点是它们可以将异步代码编写成同步代码的形式，这样阅读和编写代码更加容易。例如，如果我们想要等待某些异步操作完成后继续执行代码，我们可以使用 yield 语句暂停函数的执行，然后在异步回调中继续函数的执行。这个过程可以使用 Promise 对象简化，具体做法如下：
-- -------------------- ---- ------- --------- ----------- - --- ------ - ----- ---------------------------------------- -------------------- - --- --- - ------------ --- ------- - ----------------- ------------------------------- - ------ ---------------- ---------------------- - --------------- ---
在这个例子中，我们先定义了一个 generator 函数，它首先调用 fetch('http://example.com/movies.json') 来获取一个 promise 对象。然后我们创建了一个 generator 对象 gen，调用它的 next() 方法获取 promise 对象，当 promise 对象被 resolved 时，我们将响应数据传递给 generator 函数（通过 generator 的 next(data) 调用），generator 函数中的 result 变量将被设置为该响应数据。最后，我们将结果打印到控制台。
注意，我们可以使用 yield 关键字接收 promise 对象。这就是生成器函数的一个强大功能，因为它允许我们将异步操作嵌入到生成器函数中。在本例中，使用 promise，我们可以从服务器获取数据，然后在异步响应返回后继续执行 generator 函数的代码。
Promise的使用方法
除了生成器函数语法，ES6 还引入了另一个重要的异步编程原语：Promise。Promise 是一种从根本上解决回调地狱的异步代码结构。它是一个代表异步操作的异步对象，异步操作可能已经完成，也可能是一个未完成的操作。Promise 可以被认为是一个表示异步操作最终完成或失败的占位符。
Promise 的构造函数接受一个函数参数，称为执行器（executor）函数，该函数将接收两个函数参数，分别是 resolve() 和 reject()，这些函数分别被用于异步任务成功或失败时的取值。
下面是一个简单的 Promise 示例，在 JavaScript 中获取一个员工列表：
-- -------------------- ---- -------
-------- -------------- -
------ --- ------------------------- ------- -
--- --- - --- -----------------
--------------- -----------------------------------------
---------- - ---------- -
-- ----------- --- ---- -
--------------------------------------
- ---- -
------------------------------
-
--
----------- - ---------- -
--------------------- ---------
--
-----------
---
-
--------------------------------------- -
-----------------------
------------------------ -
-------------------
---在这个例子中，我们使用 Promise 来获取员工列表。当使用 XMLHttpRequest 发送请求时，我们将成功和失败结果传递给 resolve() 和 reject() 函数。然后，我们使用 .then() 和 .catch() 方法来处理成功和失败返回值。
需要注意的是：Promise通过then方法附加回调函数，finally() 方法、all() 方法、race() 方法等特性来处理异步操作。
结论
在 ES6 中，生成器函数和 Promise 提供了一种更好的异步编程模型。生成器提供了一个可暂停和恢复的函数执行的机制，它可以方便地将异步操作嵌入到 JavaScript 中。而 Promise 提供了对异步操作状态的跟踪和处理，并让异步操作更加清晰，同时减少了回调地狱等问题的发生。
当你开始编写异步代码时，使用生成器和 Promise 作为 JavaScript 异步编程的基础知识是很重要的。在将这些概念应用于实际项目中时，你可能会遇到许多其他实际问题。因此，使用这些特性时应尽量小心，并始终使用已验证的，经过测试的代码来保证您的编程任务成功完成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6735f97d0bc820c582518378