在前端开发中，异步任务链问题是一个经常遇到的挑战。当我们需要按照一定的顺序执行一系列异步任务时，传统的回调函数方式往往会导致回调地狱，代码难以维护和扩展。在 ECMAScript 2017 中，引入了 Generator 函数，可以很好地解决这个问题。
Generator 函数
Generator 函数是 ECMAScript 6 中引入的一种特殊函数，它可以在函数执行过程中暂停和恢复执行，从而实现异步任务链的控制。Generator 函数通过 function* 声明，使用 yield 关键字来控制函数的执行流程。
下面是一个简单的 Generator 函数示例：
function* generatorFunction() {
console.log('start');
yield 1;
console.log('middle');
yield 2;
console.log('end');
}这个函数中，我们使用 yield 关键字暂停函数执行，并且返回一个值。当函数下一次被调用时，它会从上次暂停的位置继续执行，直到遇到下一个 yield 或者函数结束。
我们可以通过以下代码来调用这个 Generator 函数：
const generator = generatorFunction();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: undefined, done: true }从输出结果可以看到，每次调用 generator.next() 都会执行到下一个 yield 关键字，并且返回一个对象，其中 value 属性为 yield 后面的值，done 属性为表示是否已经执行完所有代码。
利用 Generator 解决异步任务链问题
在实际开发中，我们通常会遇到需要按照一定顺序执行异步任务的情况。假设我们需要按照以下顺序执行三个异步任务：
- 发送一个 HTTP 请求，获取某个资源。
- 对获取的资源进行处理，得到一个新的数据。
- 将新的数据保存到本地存储中。
如果使用传统的回调函数方式，代码可能会像这样：
http.get(url, (response) => {
processData(response, (data) => {
localStorage.setItem('data', JSON.stringify(data));
});
});这种方式会导致回调地狱，代码难以维护和扩展。我们可以使用 Generator 函数来解决这个问题，代码可以像这样：
-- -------------------- ---- -------
--------- ----------- -
----- -------- - ----- --------------
----- ---- - ----- ----------------------
----- ---------------------------- ----------------------
-
----- --------- - ------------
-------------------------------------- -- -
------------------------------------------ -- -
---------------------
---
---在这个示例中，我们定义了一个 taskChain Generator 函数，它包含三个异步任务。在开始执行任务前，我们需要先创建一个 generator 实例。然后，我们通过调用 generator.next() 来开始执行任务。每次执行任务时，我们需要通过 yield 暂停函数执行，并且返回一个 Promise 对象。当 Promise 对象执行完成后，我们需要手动调用 generator.next() 继续执行下一个任务。
总结
在 ECMAScript 2017 中，Generator 函数为我们解决了异步任务链的问题。通过使用 Generator 函数，我们可以轻松地按照一定顺序执行异步任务，而不会陷入回调地狱。在实际开发中，我们可以将任务链封装到一个 Generator 函数中，并通过手动调用 generator.next() 来控制任务的执行流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e1ca1f1886fbafa4eb6524