ES6 新特性之Generator

时间 2020-06-08

原文原文链接

1：基本概念

实际上Generator就是遍历器的一个生成器，咱们能够用Generator来生成一个遍历器。Generator有两个明显的特色：第一个是function关键字与函数名之间有一个星号，通常而言是将二者写在一块儿的。第二个是在函数体内部有一个yield的关键字。ios

function* generator(){
        yield 1;
        yield 2;
        return 3;  //return表明next的结束，对应着Generator遍历器的结束
    }
    const firstGenerator = generator();
    //
    firstGenerator.next()
    { value: 1, done: false }
    firstGenerator.next()
    { value: 2, done: false }
    firstGenerator.next()
    { value: 3, done: true }
    firstGenerator.next()
    { value: undefined, done: true }
    firstGenerator.next()
    { value: undefined, done: true }

2：执行过程

调用Generator函数后并不执行，第一次调用不执行，只有在调用next的时候才会真正的执行。axios

function* generator(){
        console.log(1);
        yield 1;
        console.log(2);
        yield 2;
        console.log(3)
        return 3;
        console.log(4);
    }
    const gen = generator();

调用next方法开始执行，指针移向下一个状态网络

function* generator(){
        console.log(1);
        yield 1;
        console.log(2);
        yield 2;
        console.log(3)
        return 3;
        console.log(4);
    }
    const gen = generator();
    gen.next();
    
    // 1
       { value: 1, done: false }

执行到yield或者是return语句，每个next只能走到下一个yield或者是直接跨到了return。异步

function* generator() {
      console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      return 3;
      console.log(4);
    }
    const g = generator();
    g.next();
    g.next();
    
    // 1
       2
       { value: 2, done: false }

当next时，会从上一次暂停位置开始执行，直到return，return是退出next的一个标志。函数

function* generator() {
      console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      return 3;
      console.log(4);
    }
    
    const g = generator();
    g.next();
    g.next();
    g.next();
    g.next();
    
    // 1
       2
       3
       { value: undefined, done: true }

3：Generator方法

next，若是传了参数被看成上一个yield表达式的返回值，说明next是能够传参数的，若是没传时undefined。fetch

function* generator(x) {
  var y = 3 * (yield (x + 3));
  var z = yield (y / 2);
  return (x + y + z) * 2;
}

const gen1 = generator();


// gen1.next(); 
   { value: NaN, done: false } 
   gen1.next();
   { value: NaN, done: false } */
   gen1.next();
   { value: NaN, done: false } */
   gen1.next();
   { value: undefined, done: true }
function* generator(x) {
  var y = 3 * (yield (x + 3));
  var z = yield (y / 2);
  return (x + y + z) * 2;
}

const gen2 = generator(10);
gen2.next();
// { value: 13, done: false } 
/*
x = 10
13 = 10 + 3
*/

gen2.next(10);
// { value: 15, done: false }
/*
y = 30
15 = 3 * 10 / 2
*/

gen2.next(10);
// { value: 100, done: false }
/*
z = 10
100 = (10 + 10 + 30) * 2
*/

throw，函数外抛出错误在Generator函数体内捕获url

function* generator(x) {
  try {
    yield;
  } catch (err) {
    console.log('inner error', err);
  }
}

const g = generator();
g.next();
// { value: undefined, done: false }

g.throw(new Error('123'))
// inner error Error: 123

return ，终结当前的Generator函数。

4：Generator函数应用

yield*，在Generator函数内部调用另外一个Generator函数，无需手动遍历。指针

function* generator1(){
  yield* [1, 2, 3];
}
generator1().next();
// { value: 1, done: false } 

function* generator2(){
  for (var value of [1, 2, 3]) {
    yield value;
  }
}
generator2().next();
// { value: 1, done: false } 

function* generator3(){
  yield [1, 2, 3];
}
generator3().next();
// { value: Array(3), done: false }

5：Generator函数应用

for of，遍历return前的数据code

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

for (let s of generator()) {
  console.log(s);
}
//  1
    2
    3

状态机generator

const status = function* () {
  while (true) {
    console.log('On');
    yield true;
    console.log('Off');
    yield false;
  }
}();
status.next();

// On
   {value: true, done: false}

网络请求

import axios from 'axios';

function* generator(){
  const url = 'https://xxx.xxx.com';
  const result = yield fetch(url);
  return result();
}

异步操做文件流