Generator：同步代码书写异步情怀

时间 2019-11-16

标签 generator 同步代码书写异步情怀繁體版

原文原文链接

编者按：看完本文，你能对ES6的Generator有一个很好的理解，轻松地以同步的方式写异步代码，也能初步理解到TJ大神的co框架的原理。javascript

前言：ES6在2015年6月正式发布，它带给js带来许多新特性，其中一个就是Generator，虽然其它语言如python早就有了，但js的Generator和它们的仍是有点不同的，js的Generator重点在解决异步回调金字塔问题，巧妙的使用它能够写出看起来同步的代码。html

咱们都知道js跟其它语言相比，最大的特性就是异步，因此当咱们要取异步取一个文件内容时，通常咱们会这样写java

$.get('http://youzan.com/test.txt', function(data){
    console.log(data);
})复制代码

若是取完A文件后又要再取B文件：node

$.get('http://youzan.com/A.txt', function(a){
    $.get('http://youzan.com/B.txt', function(b){
        console.log(b);
    }
}复制代码

再取一个C文件可能这样写：python

$.get('http://youzan.com/A.txt', function(a){
    $.get('http://youzan.com/B.txt', function(b){
        $.get('http://youzan.com/C.txt', function(c){
            console.log(c);
        }
    }
}复制代码

当有更多的异步操做，业务逻辑更为的复杂时，按上面的写法维护时心中确定要骂娘了。那有没有更好一点的写法呢？在Generator出来以前可使用promise实现，虽说promise也是es6的一部分，es6标准未出以前已经有不少ployfill出来了。git

$.get('http://youzan.com/A.txt')
    .done(function(a){
        return $.get('http://youzan.com/B.txt');
    })
    .done(function(b){
        return $.get('http://youzan.com/C.txt');
    })
    .done(function(c){
        console.log(c);
    })复制代码

promise的实现要比上面嵌套回调要优雅许多，但也能够一眼看出异步回调的身影。目前js有不少框架要致力解决js金字塔回调，让异步代码书写的逻辑更为清晰，如async, wind.js, promise, deffer。这些框架都有本身的一些约定，如async是以数组形式来写，promise是以回调参数方式，但它们都不能作到像写c或java那样第一行open一个file，而后第二行立刻读取，来看看最新的Generator是怎么作的：es6

co(function* (){
    var a = yield $.get('http://youzan.com/A.txt');
    var b = yield $.get('http://youzan.com/B.txt');
    var c = yield $.get('http://youzan.com/C.txt');
    console.log(c);
})复制代码

上面代码使用了co框架包裹，里面一个Generator，从书写上看它已经和其它同步语言差很少。写了多年的异步看到上面代码是否是感受不可思义呢？这就是Generator带来的可喜之处，其实es6还更多的新东西等着你发现。下面来了详细了解一下Generator。github

Generator是什么

Generator是生成器的意思，它是一种能够从中退出并在以后从新进入的函数。生成器的环境（绑定的变量）会在每次执行后被保存，下次进入时可继续使用。生成器其实在其它语言很早就有了，好比python、c#，但与python不一样的是js的generator更多的是提供一种异步解决方案。chrome

Generator使用function*来定义，内部有yield关键字，next方法控制内部执行流程，每执行到一个yield语句就会中断，并返回一个迭代值，下次执行时从yield的下一个语句继续执行。一个生成器只能执行一次。express

一个简单的定义以下：

function* hello() {
   var a = 'b'
   yield 'a';
   return a;
}

var gen = hello();
console.log(gen);
// => hello {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: undefined}
console.log(gen.next())
// => {value: "a", done: false}
console.log(gen.next())
// => {value: "b", done: true}复制代码

上面代码经过调用hello()，产生了一个生成器，内部代码没有执行。调用next方法执行到yield后暂停，内部环境被保存，next执行返回一个对象，value为yield的执行结果，done表示迭代器是否完成。当迭代器完成后，done为true，value为return的值，继续执行next，value将为undefined

Generator执行原理

回到开头的例子，Generator给咱们提供了直观的写法来处理异步回调，它让代码逻辑很是清晰。来了解一下Generator内部的一些原理

function* hello() {
   yield 'a';
   return 'b';
}
var gen = hello();
console.log(gen);
// => hello {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: undefined}复制代码

使用chrome工具查看对象内容，可发现里面有next和throw方法。

当咱们执行next方法时，发现其返回了一个对象：

对象含有value和done两个字段，value为yield 'a'的返回值，即为'a'，done表示generator的状态，为true时表示执行完成。再执行next方法时，能够看到done的值已经为true了，并且value的值为return的值。

查看gen自身内部的状态，能够看到GeneratorStatus已经为closed了

综上能够得出Generator是经过调用next方法来控制执行流程，当遇到yield语句时暂停执行。next方法返回一个对像{value: 'yield', done: false}，value存储的yield 执行结果，done表示迭代器是否执行完成。

经过上面的了解貌似generator并无太大卵用，不能如所说的用同步情怀书写异步代码。上面漏了很重要的一点就是yield的返回值及next的参数。看下面一段代码：

function* hello() {
  var ret = yield 'a';
  console.log(ret);
}复制代码

而后过程以下一下：

从上面执行过程能够看到，ret与第二个next的参数值同样，这是Generator的传值方式。yield的返回值就是next的参数，第一个next因为执行到yield语句以前就暂停了，因此参数b没有用。

这里也提一下上面出现的throw方法。

在generator中使用gen.throw('error')来抛出异常。当出现异常后，迭代停止，再次执行gen.next()时，将返回{value: undefined, done: true};

使用try catch可捕获gen.throw出来的异常。

Generator自动执行封装

至此对generator了解的也差很少了，但貌似使用它来写代码感受挺变扭的，由于你要不停的next，若是有一个函数能自动执行generator函数就行了。就像以前提到的代码：

co(function* (){
    var a = yield $.get('http://youzan.com/A.txt');
    var b = yield $.get('http://youzan.com/B.txt');
    var c = yield $.get('http://youzan.com/C.txt');
    console.log(c);
})复制代码

上面提到的Generator内部原理能够总结出，right这边执行后的结果放到value里，next的参数放到了left这边。为了让right这边执行后的结果放到left，那right就得返回一个function，传一个callback进行，而后在callback里执行next方法。经过了角Generator的数据传递过程就能够写出一个简易版的co来自动执行next方法，以达到上面代码效果：

function co(genFunc) {
  var gen = genFunc();

  var next = function(value){
     var ret = gen.next(value);
     if (!ret.done) {
       ret.value(next);
     }
  }

  next();
}

function getAFromServer(url){
    /* *do something sync */
    return function(cb) {
       /* *do something async */ 
       var a = 'data A from server';
       cb(a);    // 返回读到的内容
    }
}

function getBFromServer(url){
    /* *do something sync */
    return function(cb) {
       /* *do something async */ 
       var b = 'data B from server';
       cb(b);    // 返回读到的内容
    }
}

co(function* (){
  var ret = yield getFromSever('url of A');
  console.log(ret);  // 输出 data A from server
  var retB = yield getFromSever('url of B');
  console.log(retB);  // 输出 data B from server
})复制代码

上面的co就是一个很是简单的自动执行generator next的函数，且right这边的值能正确传到left，惟一的要求是getA的写法必须trunk的写法。像咱们使用nodejs的一些异步api，可以使用trunkify来转成trunk形式。

在co内部主要靠next来实现循环，靠外部cb()来驱动运行。大致流程以下：

了解了co原理，那就能够把它作得更强大一些，如支持Promise，支持nodejs写法的异常处理。这个能够参考co, trunks的代码。

支持状况

根据这个ECMAScript 6 compatibility table的资料显示，目前已经有以下平台能够支持：

Chrome 35+ (about://flags中开启)
Firefox 31+ (默认开启)
nodejs harmony
nodejs 0.11+

参考资料

本文首发于有赞技术博客: tech.youzan.com/es6-generat…