翻看这篇，我就默默的打开谷歌搜索了好几个关键词。本文来自@Tw93童鞋的翻译投稿。估计不少人应该看了会很蒙，可以看的时候多了解下。

　　正文从这开始～

　　简介

　　以下这篇文章是对Generator和Channel的一个介绍，如果你对Promise，Generator，Coroutine和Channel有过了解，可以直接跳到Using Generators and Channels with React这部分，下面的代码更多的用于探索尝试新的编程思路，对于实际生产环境可能不能直接采用 。

　　稍微花点时间看看这个listen函数。

　　这个函数可以将每个在Dom元素上面的事件转换成一个Channel，我们可以从这个基础点开始。

　　Why Generators and Channels?

　　在我们学习Generator，Coroutine和Channel之前，先了解下常规的Promise。

　　当getUsers函数成功时候会返回一个Promise对象，Promise的resolves会携带着必要的数据。同时我们能很好的处理超过一个Promise的情况，或者一个Promise依赖于另外一个Promise和一个操作需要所有的Promise一起运行才能解决问题的情况，以上这两种情况，其实标准的Promise实现就可以覆盖到。第一种链式情况可以使用Promise的then实现，后一种可以使用Promise.all来实现。

　　通常把Promise当作回调（回调地狱）的更加简洁的替换方案，假如你不清楚什么是回调地狱，可以看看下面的代码。

　　当我们处理不是很复杂代码的时候，使用嵌套函数会是一个不错的选择，但是嵌套代码不利于扩展和维护。通过使用Promise可以从一开始就避免回调，并且可以有效地避免回调嵌套，还可以更好的处理异常。

　　在运行所有的异步函数后再来使用Then也是可以的。

　　现在我们已经回顾了Callback和Promise的基本用法，接下来介绍ES6中Generator的用法。

　　Generator

　　在我们讲what,why,how之前，我们可以先看看Generator的定义。

　　Generators are functions that can be paused and resumed, which enables a variety of applications.

　　来自

　　为了快速的总结Generator，它们可以使我们通过调用在一个迭代器对象上面调用yield和通过next获取到值生成一个值的序列。

　　下面是一个如何使用Generator的例子。

　　我们可以通过Generator做迭代，也可以用来observe数据，同时也很适合lazy evaluation和control flow。

　　这儿有一组关于如何从Generator获取值的例子，最后一个例子还展示了如何通过reduce获取数据。

　　此外Generator可以通过next传递数据， 比较奇葩的是第一个next的作用只是开启迭代 ，第二个next才可以取到正常的值，该例子很好的说明了上面的问题。

　　从上面的输出可以看出，第一个next是可以忽略的， 只需从第二个开始考虑即可。

　　只需要在Generator中定义一个return就可以终止它。并且，在Generator函数中还可以调用其他Generator函数。

　　以上是对Generator的基础介绍。

　　关于ES6中Generator更详细的的介绍，可以阅读 Axel Rauschmayer这篇更全面的文章，ES6 Generators in depth。

　　Generator, Promise and Coroutine

　　现在我们已经基本了解Promise和Generator了，下面将会介绍如何将这两者结合起来使用。

　　显而易见，我们需要一些机制来确保不用手动来运行循环。这就是Coroutine发挥作用的地方了，它们可以使我们写能够处理异步的行为，包括Promise,Thunk或者其它的operate，co就是处理这种情况的一个典型的库。

　　接下来的代码是对co的一种很简单粗糙的实现，但是我们可以从这里看到co函数是怎么运行的。

　　接下来，我们使用简化co函数来实现之前fetch数据的那个例子。

　　我们可以看到Coroutine能让我们写那种看起来是同步的代码来实现异步，如下