Generator函数异步编程同步写法

Generator 函数的语法

简介

基本概念

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍 Generator 函数的语法和 API，它的异步编程应用请看《Generator 函数的异步应用》一章。

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

    function* helloWorldGenerator() {
      yield 'hello';
      yield 'world';
      return 'ending';
    }
    
    var hw = helloWorldGenerator();

调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

    hw.next()
    // { value: 'hello', done: false }
    
    hw.next()
    // { value: 'world', done: false }
    
    hw.next()
    // { value: 'ending', done: true }
    
    hw.next()
    // { value: undefined, done: true }

Generator函数写法

    function * foo(x, y) { ··· }
    function *foo(x, y) { ··· }
    function* foo(x, y) { ··· }

yield表达式

执行到时返回一个包含结果和是否结束的布尔值,yield必须放在Generator函数中执行,Generator可以不使用yield,这时候方法变成一个暂缓函数

    function* f() {
      console.log('执行了！')
    }
    
    var generator = f();
    
    setTimeout(function () {
      generator.next()
    }, 2000);

用for…of执行Generator函数

    var arr = [1, [[2, 3], 4], [5, 6]];
    
    var flat = function* (a) {
      var length = a.length;
      for (var i = 0; i < length; i++) {
        var item = a[i];
        if (typeof item !== 'number') {
          yield* flat(item);
        } else {
          yield item;
        }
      }
    };
    
    for (var f of flat(arr)) {
      console.log(f);
    }
    // 1, 2, 3, 4, 5, 6

如果yield表达书在另一个表达式中,必须放在圆括号里面

    function* demo() {
      console.log('Hello' + yield); // SyntaxError
      console.log('Hello' + yield 123); // SyntaxError
    
      console.log('Hello' + (yield)); // OK
      console.log('Hello' + (yield 123)); // OK
    }

yield表达会作用函数参数放在表达式右边,可以不加括号

    function* demo() {
      foo(yield 'a', yield 'b'); // OK
      let input = yield; // OK
    }

与Iterator接口的关系

Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。

    var myIterable = {};
    myIterable[Symbol.iterator] = function* () {
      yield 1;
      yield 2;
      yield 3;
    };
    
    [...myIterable] // [1, 2, 3]

Generator 函数执行后，返回一个遍历器对象。该对象本身也具有Symbol.iterator属性，执行后返回自身。

    function* gen(){
      // some code
    }
    
    var g = gen();
    
    g[Symbol.iterator]() === g
    // true

next方法的参数

next方法带一个参数,被当做上一个yield表达式的返回值,第一次调用时不能传入参数,除非再包一层

    function* f() {
      for(var i = 0; true; i++) {
        var reset = yield i;
        if(reset) { i = -1; }
      }
    }
    
    var g = f();
    
    g.next() // { value: 0, done: false }
    g.next() // { value: 1, done: false }
    g.next(true) // { value: 0, done: false }
    

for…of循环

for…of循环可以遍历Grenerator函数运行生成的Interator对象,不需要一步步next(),

例子:通过Grenerator函数给对象添加遍历接口

    function* objectEntries() {
      let propKeys = Object.keys(this);
    
      for (let propKey of propKeys) {
        yield [propKey, this[propKey]];
      }
    }
    
    let jane = { first: 'Jane', last: 'Doe' };
    
    jane[Symbol.iterator] = objectEntries;
    
    for (let [key, value] of jane) {
      console.log(`${key}: ${value}`);
    }
    // first: Jane
    // last: Doe

for…of 扩展运算符,解构赋值和Array.form内部都是遍历接口,都可以遍历Grenerator函数生成的Interator接口

向next传参数主要是为了在不同阶段改变函数的行为

Generator.prototype.throw()

Generator生成的遍历器默认有throw方法,主要是将函数内部的error抛出,但是不影响函数的下一步进行

    var g = function* () {
      try {
        yield;
      } catch (e) {
        console.log('内部捕获', e);
      }
    };
    
    var i = g();
    i.next();
    
    try {
      i.throw('a');
      i.throw('b');
    } catch (e) {
      console.log('外部捕获', e);
    }
    // 内部捕获 a
    // 外部捕获 b

外部只能捕获到 全局的throw命令抛出的错误

    var g = function* () {
      while (true) {
        try {
          yield;
        } catch (e) {
          if (e != 'a') throw e;
          console.log('内部捕获', e);
        }
      }
    };
    
    var i = g();
    i.next();
    
    try {
      throw new Error('a');
      throw new Error('b');
    } catch (e) {
      console.log('外部捕获', e);
    }
    // 外部捕获 [Error: a]

遍历器的thow方法被捕获后会附带执行下一条yield和next()相同

Genererator函数的优势在于可以只写一个try…cath() 就能捕获所有error ,回调函数必须在每个函数体内处理错误

如果Generator报错 但是没有被捕获就会结束Generator的遍历

Generator.prototype.return()

return()方法提前结束函数,且返回值是传入的参数,不提供则为undefined