使用 ECMAScript 2016 的生成器函数实现异步流程控制

随着互联网技术的发展，前端开发的复杂度越来越高，异步流程控制成为前端开发中一个重要的环节。在 JavaScript 中，异步编程有很多种方式，而 ECMAScript 2016 中新增的生成器函数，为我们提供了一种非常方便的异步流程控制方式。

生成器函数

生成器函数是 ECMAScript 2015 中引入的一种新的函数类型，通过 function* 来声明。和普通的函数不同的是，生成器函数可以暂停执行，并在需要时重新开始执行，直到生成器函数结束。

以下是一个简单的示例：

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator();

console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);

运行结果：

1
2
3

生成器函数会返回一个迭代器对象，我们可以通过 next() 方法来逐个获取生成器函数中的值，直到结束。

异步流程控制

在异步编程中，我们通常需要处理多个异步操作的结果，然后再做出相应的处理。以读取文件为例，我们读取一个文件时需要等待文件读取完成，然后再做出对应的处理。

传统的解决方案是使用回调函数，但是这种方式会导致多层嵌套，不易阅读和维护。而使用生成器函数就可以非常便捷地实现异步流程控制。我们只需要使用 yield 来暂停生成器函数的执行，然后等待异步操作完成后再继续执行。

以下是一个读取文件的示例：

const fs = require('fs');

function readFile(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf8', (err, data) => {
      if (err) reject(err);
      else resolve(data);
    });
  });
}

function* readFiles() {
  const data1 = yield readFile('file1.txt');
  const data2 = yield readFile('file2.txt');
  console.log(data1);
  console.log(data2);
}

function run(gen) {
  const genObj = gen();

  function next(err, data) {
    if (err) genObj.throw(err);
    else {
      const result = genObj.next(data);
      if (result.done) return;
      result.value.then(next, err => genObj.throw(err));
    }
  }

  next();
}

run(readFiles);

在上面的代码中，我们定义了一个 readFile() 函数，该函数返回一个 Promise 对象，用于封装异步读取文件的过程。然后在 readFiles() 中使用 yield 关键字来暂停生成器函数的执行，等待文件读取完成。

最后，我们定义了一个 run() 函数，用于执行生成器函数，并传入一个 next() 函数来继续生成器函数的执行。在 next() 函数中，我们根据结果调用 genObj.next() 或者 genObj.throw()，从而实现异步流程控制。

总结

使用 ECMAScript 2016 的生成器函数实现异步流程控制，可以让我们的代码更加简洁和易读。同时，生成器函数还可以让我们更好地处理异步的错误，提高代码的健壮性。

如果你正在进行前端开发，那么一定需要掌握异步流程控制的技巧，在实际项目中使用生成器函数是一种不错的选择。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a1fc56add4f0e0ffa109b9