前言

Generator是es6提供的一个异步的操作方法，是一个状态机，封装了多个内部状态。
以下内容分用法和原理两部分。

用法：

一、Generator基本用法：

1.无参数


function* fn() {
  yield 1;
  yield 2;
  return 'ending';
}
var f = fn()
console.log(f.next()) // {value: 1, done: false}
console.log(f.next()) // {value: 2, done: false}
console.log(f.next()) // {value: "ending", done: true}

function* fn() {
  yield 1;
  yield 2;
  return 'ending';
}
var f = fn()
for (var i of f) {
  console.log(i) // 1,2
}

我们可以通过在函数前加*方式建立Generator函数，里面就可以通过yield返回了。通过next()方法或者var ... of方法获取数据。done:false代表yield执行并未结束，done: true表示程序执行结束。

yield与return比较：

相同点：都是可以返回紧随其后的数据。
不同点：yield是函数暂定，可以有多个返回；return是函数结束，只能有一次返回。

2.有参数

function* generator() {
  var a = yield 'a';
  var b = yield 'b';
  console.log(a, b) // 2,3
  return 'ending';
}

var f = generator()
f.next(1)
f.next(2)
f.next(3)

看上述代码可以看出：yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

但是我们想要的是yield后面的值也就是"a","b"。我们的思路就是拿上一个next的value值当下一个next的参数不就行咯！

function* generator() {
  var a = yield 'a';
  var b = yield 'b';
  console.log(a, b) // 'a','b'
  return 'ending';
}

var f = generator()
const a_obj = f.next('defaultValue')
const b_obj = f.next(a_obj.value)
f.next(b_obj.value)

打印出来我们需要的a,b了。第一个next的参数可以是任意值，没有特殊的意义。

我们封装一下：

function* generator() {
  var a = yield 'a';
  var b = yield 'b';
  console.log(a, b) // 2,3
  return 'ending';
}
dispatch(generator(1));

function dispatch(g) {
  var g_obj = g.next(g.value);
  // 如果Generator函数未结束，就继续调用
  if (!g_obj.done) {
    g.value = g_obj.value
    dispatch(g);
  }
}

哦了，用过redux-saga或者dva effects的，一定很好奇怎么实现的，现在明白了吧。

3.yield * 嵌套

function* g1(){
    yield 2;
    yield 3;
}

function* g2(){
    yield 1;
    yield* fn1();
    yield 4;
}

var g = g2();
console.log(g.next().value); // 1
console.log(g.next().value); // 2
console.log(g.next().value); // 3
console.log(g.next().value); // 4

理解起来就是yield *可以把另一个Generator函数引入到当前Generator函数中，代码上很好理解。

Generator实战：

1、简单实现redux-sage调用接口

function apiInterface(url) {
  Promise.resolve().then(_=>{
    it.next('{"a":1}');
  }) 
}

function* generator() {
  var result = yield apiInterface("http://api");
  var resp = JSON.parse(result || '{}');
  console.log(resp);
}

var it = generator();
it.next();

我们要的其实很简单，就是想在Generator函数中拿到返回值result，此时可以通过微异步函数Promise.resolve()的then方法里面调用一次next方法即可。这样就能拿到接口的数据response了。大家可以把Promise.resolve()换成ajax的方法试一下就知道了。

2、简化promise写法

这里主要实现Generator，其他的简化了。（Generator可直接跑）

先写需要回调的函数：

function step1(url) {
  return {"a":1} 
}
function step2(url) {
  return {"b":2}
}
function step3(url) {
  return {"c":3}
}

普通ajax回调函数：

step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
    console.log("结束")
    });
  });
});

promise写法：

step1().then(function(value1) {
    return step2(value1);
}).then(function(value2){
    return step3(value2);
}) .then(function(value3) {
    console.log("结束")
});

Generator写法：

function* generator(value1) {
  try {
    var value2 = yield step1(value1);
    var value3 = yield step2(value2);
    var value4 = yield step3(value3);
    console.log("结束", value2, value3, value4) // {a: 1} {b: 2} {c: 3}
  } catch (e) {}
}

dispatch(generator(1));

function dispatch(g) {
  var g_obj = g.next(g.value);
  // 如果Generator函数未结束，就继续调用
  if (!g_obj.done) {
    g.value = g_obj.value
    dispatch(g);
  }
}

类似redux，你把dispatch封装一下，就很简单调用了，主要是用起来很方便简洁。

初学者使用generator遇到的问题：

控制台报错：Generator is already running。
解释原因：前言提到Generator是异步编程，但出现同步与异步的混合编写，就会出这个问题。
举例：

function apiInterface(url) {
  it.next('{"a":1}'); 
}

function* generator() {
  var result = yield apiInterface();
}

var it = generator();
it.next();

上述代码中，对JS的单进程而言，一个next()还没结束，就调用了另一个next()；只需要通过异步机制解决即可。比如Promise.resolve().then，或者setTimeout
加了异步的代码：

function apiInterface(url) {
 Promise.resolve().then(_=>{
    it.next({"a":1});
  }) 
}

function* generator() {
  var result = yield apiInterface();
}

var it = generator();
it.next();

原理篇：（来点干货）

Iterator（遍历器）

首先我们先了解下遍历器是什么。

js目前有四种表示 $\color{red}{集合}$ 数据结构数组（Array）、对象（Object）、Map、Set。这时候就需要一个去统一处理他们的工具，便是Iterator。

我们先去实现它：

var it = makeIterator([1, 2);

console.log(it.next()) // { value: 1, done: false }
console.log(it.next()) // { value: 2, done: false }
console.log(it.next()) // { value: undefined, done: true }

// for (var i of it) {
//   console.log(i)
// }

function makeIterator(array) {
  var nextIndex = 0;
  return {
    [Symbol.iterator]: function () {
      return this;
    },
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

从next可以看出Iterator执行机制，我们通过next封装了数据结构的多个状态。
第一个next，是获取的数组中1的对象值。
第二个next，是获取的数组中2的对象值。
第三个next，数组获取完毕，通过done:true告诉用户遍历完毕。
Symbol.iterator是什么东西，专门为for-of而生的，通过这个函数我们就可能通过for-of获取数据集合中的值，你试试把这个函数删了，看下for-of会不会报错。

通过我们写的makeIterator方法，大家可以发现Generator的next和for-of的可用性得到了验证。

总结：Generator你可以理解为通过* 和 yiled以封装的方式，实现了next 和 Symbol.iterator方法，更利于用户的使用。

延伸：Iterator使用场景包括解构赋值、扩展运算符等等es6场景。

下篇文章，async await优化版的gennerator函数。

es6~9之Generator函数解析（精选篇）