# generator.MD

# generator

generator yield配合使用

#### 一、generator介绍

​    1.generator函数式es6引入的，用于异步编程

​    2.最大特点是可以交出函数的执行权（暂停函数）

​    3.和普通函数写法区别

    function关键字和函数名之间有一个星号
    内部使用yield，定义不同的状态

本质上generator函数是一个异步任务的容器，yield命令是不同状态的分界线。

```
function* gen(){
    yield 'a';
    yield 'b';
    yield 'c';
    return 'd'
    
}
```

#### 二、执行generator（next）

让generator执行起来，需要.next()方法（函数的启动方法），分阶段执行函数。

每次调用.next,会返回一个对象{value:any,done:boolean}

​    done:函数是否执行完

```
function* gen(){
    yield 'a';
    yield 'b';
    yield 'c';
    return 'd'
}

const _gen = gen();
console.log(_gen.next() );
console.log(_gen.next() );
console.log(_gen.next() );
console.log(_gen.next() );
console.log(_gen.next() );

```

#### 三、next的传参

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

```
function* gen(){
    var n = 1;
  var x = yield n + 10;
  console.log(x,'pause1')
  yield ++n;
  console.log(x,'pause2')
    yield ++n;
}
const _gen = gen();
console.log(_gen.next() );
console.log(_gen.next('aaa'));
console.log(_gen.next() );

```

作用：分阶段的注入数据，让函数不同阶段给出不同的返回值。

#### 四、迭代器(Iterator)

 _gen就是一个迭代器，Generator 函数就是迭代器生成函数。不能存在于普通函数

多个迭代器之间作用域独立

#### 五、for of

​    `for...of`循环可以自动遍历 Generator 函数运行时生成的`Iterator`对象，且此时不再需要调用`next`方法。

```
for (const iterator of _gen) {
  console.log(iterator,'iterator11')
}
```

一旦`next`方法的返回对象的`done`属性为`true`，`for...of`循环就会中止，且不包含该返回对象，所以上面代码的`return`语句返回的`d`，不包括在`for...of`循环之中。

#### 六、Generator.prototype.throw()

`throw`方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获，可加参数

```
var gen = function* () {
  try {
    yield 2;
  } catch (e) {
    console.log('内部捕获', e);
  }
};

var _gen = gen();
_gen.next();

try {
  _gen.throw('a');
  _gen.throw('b');
  _gen.throw('c');
} catch (e) {
  console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b
```

1.`_gen.throw`抛出错误以后，没有任何`try...catch`代码块可以捕获这个错误，导致程序报错，中断执行。

2.`throw`方法抛出的错误要被内部捕获，前提是必须至少执行过一次`next`方法。

3..`throw`方法被捕获以后，会附带执行下一条`yield`表达式。也就是说，会附带执行一次`next`方法。

```
var gen = function* gen(){
  try {
    yield console.log('a');
  } catch (e) {
    // ...
  }
  yield console.log('b');
  yield console.log('c');
}

var _gen = gen();
_gen.next() // a
_gen.throw() // b
_gen..next() // c
```

## 七、Generator.prototype.return()

迭代器有一个`return()`方法，可以返回给定的值，并且终结 Generator 函数。

```
function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

var g = gen();

console.log( g.next() )          // { value: 1, done: false }
console.log( g.return('foo')) // { value: "foo", done: true }
console.log( g.next() )       // { value: undefined, done: true }
```

如果`return()`方法调用时，不提供参数，则返回值的`value`属性为`undefined`。

#### 八、Generator的this

ES6 规定这个迭代器是 Generator 函数的实例，也继承了 Generator 函数的`prototype`对象上的方法。但是，如果把`g`当作普通的构造函数，并不会生效，因为`g`返回的总是遍历器对象，而不是`this`对象。

```
function* g() {
  this.a = 11;
}

g.prototype.hello = function () {
  return 'hi!';
};

let obj = g();

console.log(obj.a)
console.log(obj.hello())
```

#### 九、应用

###### 1.异步操作的同步化表达

```
function* loadUI() {
  showLoadingScreen();
  yield loadUIDataAsynchronously();
  hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()

// 卸载UI
loader.next()
```

上面代码中，第一次调用`loadUI`函数时，该函数不会执行，仅返回一个遍历器。下一次对该遍历器调用`next`方法，则会显示`Loading`界面（`showLoadingScreen`），并且异步加载数据（`loadUIDataAsynchronously`）。等到数据加载完成，再一次使用`next`方法，则会隐藏`Loading`界面。可以看到，这种写法的好处是所有`Loading`界面的逻辑，都被封装在一个函数，按部就班非常清晰。  

2、封装请求

1.基于promiss

```
function promiseFn() {
    new Promise(function(resolve, reject) {
        setTimeout(function() {
            foo.next('G');
        }, 1000);
    });
}

function* Foo() {
    var a = yield promiseFn();
    var b = yield promiseFn();
    console.log(a, 111);
    console.log(b, 222);
}

var foo = Foo(); // foo是全局变量，挂在window上，存在变量提升，在执行到promise异步的时候，可以直接使用
foo.next();
```

`2.基于ajax

```
function ajax() {
    $.ajax({
        type: 'get',
        url: 'demo.php',
        success: function(res) {
            foo.next(res);
        },
        error: function(error) {
            foo.next(error);
        }
    });
}

function* Foo() {
    var a = yield ajax();
    var b = yield ajax();
    console.log(a, 111);
    console.log(b, 222);
}

var foo = Foo();
foo.next();

```

yield*

function* Foo() {
    yield* 'hello';
}
var foo = Foo();

console.log(foo.next());







function* Foo() {
    yield* ['a', 'b', 'c'];
}
var foo = Foo();