以下是第五课的翻译内容
这节课讲的内容是异步 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，期待下一期的翻译教程，谢谢。
网友评论