ES6 Generator函数的应用实例分析

什么是Generator函数

Generator函数是ES6引入的一种新的函数类型，可以通过简单的语法来定义一个迭代器，主要用于异步操作或者实现自定义迭代器。

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

const g = generator(); // 调用generator函数返回一个Generator对象

console.log(g.next()); // 输出 { value: 1, done: false }
console.log(g.next()); // 输出 { value: 2, done: false }
console.log(g.next()); // 输出 { value: 3, done: false }
console.log(g.next()); // 输出 { value: undefined, done: true }

在Generator函数里可以使用yield关键字产生一个值，调用generator.next()方法会返回一个对象，包含当前yield产生的值和是否迭代完成的标志。

Generator函数的应用

1. 异步编程

由于Generator函数可以通过yield语法产生一个值，所以可以很方便地实现异步编程，下面是一个简单的异步请求示例。

function* request(url) {
  try {
    const response = yield fetch(url); // 发起异步请求，返回结果放到response中
    const data = yield response.json(); // 转化response为json格式，返回结果放到data中
    console.log(data); // 输出获取到的数据
  } catch (error) {
    console.log('Error: ' + error);
  }
}

const it = request('https://jsonplaceholder.typicode.com/posts/1');
it.next().value // 发起异步请求，得到一个Promise对象
  .then(res => it.next(res).value) // 转化response为json格式，得到一个Promise对象
  .then(data => it.next(data)); // 打印获取到的数据

2. 实现自定义迭代器

Generator函数可以很方便地实现自定义迭代器，下面是一个示例，用Generator实现一个自定义迭代器，可以循环输出一个数组的元素。

const arr = ['a', 'b', 'c'];

function* loopArray(arr) {
  for (const item of arr) {
    yield item;
  }
}

const it = loopArray(arr); // 调用loopArray函数返回一个Generator对象

for (const item of it) {
  console.log(item); // 输出 a b c
}

总结

Generator函数可以很方便地实现异步编程和自定义迭代器，使用yield关键字配合next()方法来实现协程的效果，这种模式可读性更强，且极大提升了代码的可维护性。