【翻译】异步 Javascript 系列（五）—— Generators 生成器

以下是第五课的翻译内容

---

这节课讲的内容是异步 Javascript Generators（生成器）

Generators（生成器）

生成器是 ES6 里一个相对新的涉及异步的 Javascript API。这节课不是介绍生成器，如果需要从头了解的话，我的视频频道里会有专门的 ES6 介绍。

接下来准备简介如何使用生成器与结合异步代码进行使用。

建立一个生成器，它的样子像是一个函数，区别是函数右旁加一个星号，这里我给它一个函数名 gen，然后其他样子跟函数差不多，此外，生成器可以通过 yield 关键字让函数停止，当代码里出现 yield，会执行到右侧并停在这里。

下例代码解析：

• 当生成器运行时，Javascript 从右到左执行，遇到 yield 后会取得 10 并停止继续运行，意味着 10 传递出生成器之外，我们可以在外面进行使用，然后可以通过 next 方法继续运行生成器；
• 用变量 myGen 保存生成器，你可能认为这样已经运行了生成器 gen，但实际上这里只是准备好生成器，需要对这个迭代的对象（myGen）使用 next 方法来运行代码；
• 当运行代码遇到 yield 后，会停在这里，并且返回一个迭代对象给我们，包含了表达式的值与是否已经完成。yield 右侧的表达式的值是 10，还没完成迭代。
• 继续调用 next 方法，继续往下一步执行，同样返回一个迭代对象，第二次没有返回任何值，所以 value 会是 undefined

function* gen() {
    var x = yield 10;
}
var myGen = gen();

console.log(myGen.next()); // {value: 10, done: false}，迭代还没完成，所以 done 是 false
console.log(myGen.next()); // {value: undefined, done: true}，迭代已完成，done 是 true

• 假如我们想回传值给生成器的下一步操作，next 方法里传参：

function* gen() {
    var x = yield 10;
    console.log(x); // 30，回传值会赋值给 x，即 var x = 30;
}
var myGen = gen();

console.log(myGen.next()); // {value: 10, done: false}，迭代还没完成，所以 done 是 false
console.log(myGen.next(30)); // {value: undefined, done: true}，迭代已完成，done 是 true

结合异步代码

很好，上面说的就是生成器是做什么用的，但如何协助我们处理异步代码呢？下面继续。

下面代码有点吓人，让我们来过一次：

• 这里我们将生成器作为一个参数放到 runGen 函数的参数里
• 生成器里做的是用jQuery get方法获取数据
• 然后在 runGen 里声明一个 handle 函数，先跳过这个函数
• 最后执行 handle 方法，传递 myGen.next()
• 此时进入 handle 方法，即开始执行生成器，并到第一个 yield（$.get('data/tweet.json')）处停止
• handle 的参数 yield 获得了迭代对象，done 是表示生成器是否已执行完，此处还没有
• yield.value 是 $.get的返回值，是一个 promise 对象，因此可以使用 then 方法等到数据取回来时执行 then 里的代码
• then 里的代码继续调用 handle 方法，此次需要的是将获取到的数据放到 next 里面，这样生成器的变量 tweet 就可以拿到回传的数据(var tweet = data)，并输出。
• 如此循环直到状态已经完成 （done === true）

function runGen(gen) {
    var myGen = gen(); // 准备好生成器
    
    function handle(yield) {
        if (!yield.done) {
            yield.value.then(function (data) {
                handle(myGen.next(data));
            });
        }
    }

    return handle(myGen.next());
}

runGen(function*() { // 生成器作为一个函数的参数
    var tweet = yield $.get('data/tweet.json')
    console.log(tweet);
    var friend = yield $.get('data/friend.json')
    console.log(friend);
    var video = yield $.get('data/video.json')
    console.log(video);
});

酷吧，生成器的代码看起来像同步代码那样（一件一件事情完成），但实际上是异步代码。是一种同步样子的异步代码，看起来要容易得多。

有一样要提醒的，包装器代码 runGen 是简易版本，发布版本的话可能不会想要这样写，这里只是用来说明生成器的工作原理。 Q 或者 Bluebird 可能会是更好的选择。

---

异步 Javascript 系列翻译课程就到这里结束了，翻译了一次，又重新学到不少东西，再次感谢 Shaun，期待下一期的翻译教程，谢谢。