深入理解 JavaScript 异步系列（4）—— Generator

第一部分，ES6 中的 Generator

原文地址http://www.cnblogs.com/wangfupeng1988/p/6532713.html 未经作者允许不得转载~

在 ES6 出现之前，基本都是各式各样类似 Promise的解决方案来处理异步操作的代码逻辑，但是 ES6 的 Generator却给异步操作又提供了新的思路，马上就有人给出了如何用 Generator来更加优雅的处理异步操作。

本节内容概述

• Generator简介
• Generator最终如何处理异步操作
• 接下来…

Generator 简介

先来一段最基础的 Generator代码

function* Hello() {
    yield 100
    yield (function () {return 200})()
    return 300
}

var h = Hello()
console.log(typeof h)  // object

console.log(h.next())  // { value: 100, done: false }
console.log(h.next())  // { value: 200, done: false }
console.log(h.next())  // { value: 300, done: true }
console.log(h.next())  // { value: undefined, done: true }

在 nodejs 环境执行这段代码，打印出来的数据都在代码注释中了，也可以自己去试试。将这段代码简单分析一下吧

• 定义 Generator时，需要使用 function*，其他的和定义函数一样。内部使用 yield，至于 yield的用处以后再说
• 执行 var h = Hello()生成一个 Generator对象，经验验证 typeof h发现不是普通的函数
• 执行 Hello()之后， Hello内部的代码不会立即执行，而是出于一个暂停状态
• 执行第一个 h.next()时，会激活刚才的暂停状态，开始执行 Hello内部的语句，但是，直到遇到 yield语句。一旦遇到 yield语句时，它就会将 yield后面的表达式执行，并返回执行的结果，然后又立即进入暂停状态。
• 因此第一个 console.log(h.next())打印出来的是 { value: 100, done: false }， value是第一个 yield返回的值， done: false表示目前处于暂停状态，尚未执行结束，还可以再继续往下执行。
• 执行第二个 h.next()和第一个一样，不在赘述。此时会执行完第二个 yield后面的表达式并返回结果，然后再次进入暂停状态
• 执行第三个 h.next()时，程序会打破暂停状态，继续往下执行，但是遇到的不是 yield而是 return。这就预示着，即将执行结束了。因此最后返回的是 { value: 300, done: true }， done: true表示执行结束，无法再继续往下执行了。
• 再去执行第四次 h.next()时，就只能得到 { value: undefined, done: true }，因为已经结束，没有返回值了。

一口气分析下来，发现并不是那么简单，虽然这只是一个最最简单的 Generator入门代码 ———— 可见 Generator的学习成本多高 ———— 但是一旦学会，那将受用无穷！别着急，跟着我的节奏慢慢来，一行一行代码看，你会很快深入了解 Genarator

但是，你要详细看一下上面的所有步骤，争取把我写的每一步都搞明白。如果搞不明白细节，至少要明白以下几个要点：

• Generator不是函数，不是函数，不是函数
• Hello()不会立即出发执行，而是一上来就暂停
• 每次 h.next()都会打破暂停状态去执行，直到遇到下一个 yield或者 return
• 遇到 yield时，会执行 yeild后面的表达式，并返回执行之后的值，然后再次进入暂停状态，此时 done: false。
• 遇到 return时，会返回值，执行结束，即 done: true
• 每次 h.next()的返回值永远都是 {value: ... , done: ...}的形式

Generator 最终如何处理异步操作

上面只是一个最基本最简单的介绍，但是我们看不到任何与异步操作相关的事情，那我们接下来就先展示一下最终我们将使用 Generator如何做异步操作。

之前讲解 Promise时候，依次读取多个文件，我们是这么操作的（看不明白的需要回炉重造哈），主要是使用 then做链式操作。

readFilePromise('some1.json').then(data => {
    console.log(data)  // 打印第 1 个文件内容
    return readFilePromise('some2.json')
}).then(data => {
    console.log(data)  // 打印第 2 个文件内容
    return readFilePromise('some3.json')
}).then(data => {
    console.log(data)  // 打印第 3 个文件内容
    return readFilePromise('some4.json')
}).then(data=> {
    console.log(data)  // 打印第 4 个文件内容
})

而如果学会 Generator那么读取多个文件就是如下这样写。先不要管如何实现的，光看一看代码，你就能比较出哪个更加简洁、更加易读、更加所谓的优雅！

co(function* () {
    const r1 = yield readFilePromise('some1.json')
    console.log(r1)  // 打印第 1 个文件内容
    const r2 = yield readFilePromise('some2.json')
    console.log(r2)  // 打印第 2 个文件内容
    const r3 = yield readFilePromise('some3.json')
    console.log(r3)  // 打印第 3 个文件内容
    const r4 = yield readFilePromise('some4.json')
    console.log(r4)  // 打印第 4 个文件内容
})

不过，要学到这一步，还需要很长的路要走。不过不要惊慌，也不要请如来佛祖，跟着我的节奏来，认真看，一天包教包会是没问题的！

接下来…

接下来我们不会立刻讲解如何使用 Generator做异步操作，而是看一看 Generator是一个什么东西！说来话长，这要从 ES6 的另一个概念 Iterator说起。

第二部分，Iterator 遍历器

ES6 中引入了很多此前没有但是却非常重要的概念， Iterator就是其中一个。 Iterator对象是一个指针对象，实现类似于单项链表的数据结构，通过 next()将指针指向下一个节点 ———— 这里也就是先简单做一个概念性的介绍，后面将通过实例为大家演示。

本节演示的代码可参考这里

本节内容概述

• 简介 Symbol数据类型
• 具有 [Symbol.iterator]属性的数据类型
• 生成 Iterator对象
• Generator返回的也是 Iterator对象
• 接下来…

简介 Symbol 数据类型

Symbol是一个特殊的数据类型，和 number string等并列，详细的教程可参考阮一峰老师 ES6 入门的 Symbol 篇。先看两句程序

console.log(Array.prototype.slice)  // [Function: slice]
console.log(Array.prototype[Symbol.iterator])  // [Function: values]

数组的 slice属性大家都比较熟悉了，就是一个函数，可以通过 Array.prototype.slice得到。这里的 slice是一个字符串，但是我们获取 Array.prototype[Symbol.iterator]可以得到一个函数，只不过这里的 [Symbol.iterator]是 Symbol数据类型，不是字符串。但是没关系， Symbol数据类型也可以作为对象属性的 key。如下：

var obj = {}
obj.a = 100
obj[Symbol.iterator] = 200
console.log(obj)  // {a: 100, Symbol(Symbol.iterator): 200}

在此小节中，你只需要知道 [Symbol.iterator]是一个特殊的数据类型 Symbol类型，但是也可以像 number string类型一样，作为对象的属性 key来使用

原生具有 [Symbol.iterator] 属性的数据类型

在 ES6 中，原生具有 [Symbol.iterator]属性数据类型有：数组、某些类似数组的对象（如 arguments、 NodeList）、 Set和 Map。其中， Set和 Map也是 ES6 中新增的数据类型。

// 数组
console.log([1, 2, 3][Symbol.iterator])  // function values() { [native code] }
// 某些类似数组的对象，NoeList
console.log(document.getElementsByTagName('div')[Symbol.iterator])  // function values() { [native code] }

原生具有 [Symbol.iterator]属性数据类型有一个特点，就是可以使用 for...of来取值，例如

var item
for (item of [100, 200, 300]) {
    console.log(item)
}
// 打印出：100 200 300
// 注意，这里每次获取的 item 是数组的 value，而不是 index ，这一点和 传统 for 循环以及 for...in 完全不一样

而具有 [Symbol.iterator]属性的对象，都可以一键生成一个 Iterator对象。如何生成以及生成之后什么样子，还有生成之后的作用，下文分解。

不要着急，也不要跳过本文的任何步骤，一步一步跟着我的节奏来看。

生成 Iterator 对象

定义一个数组，然后生成数组的 Iterator对象

const arr = [100, 200, 300]
const iterator = arr[Symbol.iterator]()  // 通过执行 [Symbol.iterator] 的属性值（函数）来返回一个 iterator 对象

好，现在生成了 iterator，那么该如何使用它呢 ———— 有两种方式： next和 for...of。

先说第一种， next

console.log(iterator.next())  // { value: 100, done: false }
console.log(iterator.next())  // { value: 200, done: false }
console.log(iterator.next())  // { value: 300, done: false }
console.log(iterator.next())  // { value: undefined, done: true }

看到这里，再结合上一节内容，是不是似曾相识的感觉？(额，没有的话，那你就回去重新看上一节的内容吧) iterator对象可以通过 next()方法逐步获取每个元素的值，以 { value: ..., done: ... }形式返回， value就是值， done表示是否到已经获取完成。

再说第二种， for...of

let i
for (i of iterator) {
    console.log(i)
}
// 打印：100 200 300

上面使用 for...of遍历 iterator对象，可以直接将其值获取出来。这里的”值”就对应着上面 next()返回的结果的 value属性

Generator 返回的也是 Iterator 对象

看到这里，你大体也应该明白了，上一节演示的 Generator，就是生成一个 Iterator对象。因此才会有 next()，也可以通过 for...of来遍历。拿出上一节的例子再做一次演示：

function* Hello() {
    yield 100
    yield (function () {return 200})()
    return 300
}
const h = Hello()
console.log(h[Symbol.iterator])  // [Function: [Symbol.iterator]]

执行 const h = Hello()得到的就是一个 iterator对象，因为 h[Symbol.iterator]是有值的。既然是 iterator对象，那么就可以使用 next()和 for...of进行操作

console.log(h.next())  // { value: 100, done: false }
console.log(h.next())  // { value: 200, done: false }
console.log(h.next())  // { value: 300, done: false }
console.log(h.next())  // { value: undefined, done: true }

let i
for (i of h) {
    console.log(i)
}

接下来…

这一节我们花费很大力气，从 Iterator又回归到了 Generator，目的就是为了看看 Generator到底是一个什么东西。了解其本质，才能更好的使用它，否则总有一种抓瞎的感觉。

接下来我们就 Generator具体有哪些使用场景。

第三部分，Generator 的具体应用

前面用两节的内容介绍了 Generator可以让执行处于暂停状态，并且知道了 Generator返回的是一个 Iterator对象，这一节就详细介绍一下 Generator的一些基本用法。

本节演示的代码可参考这里

本节内容概述

• next和 yield参数传递
• for...of的应用示例
• yield*语句
• Generator中的 this
• 接下来…

next 和 yield 参数传递

我们之前已经知道， yield具有返回数据的功能，如下代码。 yield后面的数据被返回，存放到返回结果中的 value属性中。这算是一个方向的参数传递。

function* G() {
    yield 100
}
const g = G()
console.log( g.next() ) // {value: 100, done: false}

还有另外一个方向的参数传递，就是 next向 yield传递，如下代码。

function* G() {
    const a = yield 100
    console.log('a', a)  // a aaa
    const b = yield 200
    console.log('b', b)  // b bbb
    const c = yield 300
    console.log('c', c)  // c ccc
}
const g = G()
g.next()    // value: 100, done: false
g.next('aaa') // value: 200, done: false
g.next('bbb') // value: 300, done: false
g.next('ccc') // value: undefined, done: true

捋一捋上面代码的执行过程：

• 执行第一个 g.next()时，为传递任何参数，返回的 {value: 100, done: false}，这个应该没有疑问
• 执行第二个 g.next('aaa')时，传递的参数是 'aaa'，这个 'aaa'就会被赋值到 G内部的 a标量中，然后执行 console.log('a', a)打印出来，最后返回 {value: 200, done: false}
• 执行第三个、第四个时，道理都是完全一样的，大家自己捋一捋。

有一个要点需要注意，就 g.next('aaa')是将 'aaa'传递给上一个已经执行完了的 yield语句前面的变量，而不是即将执行的 yield前面的变量。这句话要能看明白，看不明白就说明刚才的代码你还没看懂，继续看。

for...of 的应用示例

针对 for...of在 Iterator对象的操作之前已经介绍过了，不过这里用一个非常好的例子来展示一下。用简单几行代码实现斐波那契数列。通过之前学过的 Generator知识，应该不能解读这份代码。

function* fibonacci() {
    let [prev, curr] = [0, 1]
    for (;;) {
        [prev, curr] = [curr, prev + curr]
        // 将中间值通过 yield 返回，并且保留函数执行的状态，因此可以非常简单的实现 fibonacci
        yield curr
    }
}
for (let n of fibonacci()) {
    if (n > 1000) {
        break
    }
    console.log(n)
}

yield* 语句

如果有两个 Generator，想要在第一个中包含第二个，如下需求：

function* G1() {
    yield 'a'
    yield 'b'
}
function* G2() {
    yield 'x'
    yield 'y'
}

针对以上两个 Generator，我的需求是：一次输出 a x y b，该如何做？有同学看到这里想起了刚刚学到的 for..of可以实现————不错，确实可以实现（大家也可以想想到底该如何实现）

但是，这要演示一个更加简洁的方式 yield*表达式

function* G1() {
    yield 'a'
    yield* G2()  // 使用 yield* 执行 G2()
    yield 'b'
}
function* G2() {
    yield 'x'
    yield 'y'
}
for (let item of G1()) {
    console.log(item)
}

之前学过的 yield后面会接一个普通的 JS 对象，而 yield*后面会接一个 Generator，而且会把它其中的 yield按照规则来一步一步执行。如果有多个 Generator串联使用的话（例如 Koa源码中），用 yield*来操作非常方便。

Generator 中的 this

对于以下这种写法，大家可能会和构造函数创建对象的写法产生混淆，这里一定要注意 —— Generator 不是函数，更不是构造函数

function* G() {}
const g = G()

而以下这种写法，更加不会成功。只有构造函数才会这么用，构造函数返回的是 this，而 Generator返回的是一个 Iterator对象。完全是两码事，千万不要搞混了。

function* G() {
    this.a = 10
}
const g = G()
console.log(g.a) // 报错

接下来…

本节基本介绍了 Generator的最常见的用法，但是还是没有和咱们的最终目的————异步操作————沾上关系，而且现在看来有点八竿子打不着的关系。但是话说回来，这几节内容，你也学到了不少知识啊。

别急哈，即便是下一节，它们还不会有联系，再下一节就真相大白了。下一节我们又给出一个新概念————Thunk函数

第四部分，Thunk 函数

要想让 Generator和异步操作产生联系，就必须过 thunk函数这一关。这一关过了之后，立即就可以着手异步操作的事情，因此大家再坚持坚持。至于 thunk函数是什么，下文会详细演示。

本节演示的代码可参考这里

本节内容概述

• 一个普通的异步函数
• 封装成一个 thunk函数
• thunk函数的特点
• 使用 thunkify库
• 接下来…

一个普通的异步函数

就用 nodejs 中读取文件的函数为例，通常都这么写

fs.readFile('data1.json', 'utf-8', (err, data) => {
    // 获取文件内容
})

其实这个写法就是将三个参数都传递给 fs.readFile这个方法，其中最后一个参数是一个 callback函数。这种函数叫做 多参数函数，我们接下来做一个改造

封装成一个 thunk 函数

改造的代码如下所示。不过是不是感觉越改造越复杂了？不过请相信：你看到的复杂仅仅是表面的，这一点东西变的复杂，是为了让以后更加复杂的东西变得简单。对于个体而言，随性比较简单，遵守规则比较复杂；但是对于整体（包含很多个体）而言，大家都随性就不好控制了，而大家都遵守规则就很容易管理 ———— 就是这个道理!

const thunk = function (fileName, codeType) {
    // 返回一个只接受 callback 参数的函数
    return function (callback) {
        fs.readFile(fileName, codeType, callback)
    }
}
const readFileThunk = thunk('data1.json', 'utf-8')
readFileThunk((err, data) => {
    // 获取文件内容
})

先自己看一看以上代码，应该是能看懂的，但是你可能就是看懂了却不知道这么做的意义在哪里。意义先不管，先把它看懂，意义下一节就会看到。

• 执行 const readFileThunk = thunk('data1.json', 'utf-8')返回的其实是一个函数
• readFileThunk这个函数，只接受一个参数，而且这个参数是一个 callback函数

thunk 函数的特点

就上上面的代码，我们经过对传统的异步操作函数进行封装，得到一个只有一个参数的函数，而且这个参数是一个 callback函数，那这就是一个 thunk函数。就像上面代码中 readFileThunk一样。

使用 thunkify 库

上面代码的封装，是我们手动来做的，但是没遇到一个情况就需要手动做吗？在这个开源的时代当让不会这样，直接使用第三方的 thunkify就好了。

首先要安装 npm i thunkify --save，然后在代码的最上方引用 const thunkify = require('thunkify')。最后，上面我们手动写的代码，完全可以简化成这几行，非常简单！

const thunk = thunkify(fs.readFile)
const readFileThunk = thunk('data1.json', 'utf-8')
readFileThunk((err, data) => {
    // 获取文件内容
})

接下来…

了解了 thunk函数，我们立刻就将 Generator和异步操作进行结合

第五部分，Generator 与异步操作

这一节正式开始讲解 Generator如何进行异步操作，以前我们花了好几节的时间各种打基础，现在估计大家也都等急了，好戏马上开始！

本节演示的代码可参考这里

本节内容概述

• 在 Genertor中使用 thunk函数
• 挨个读取两个文件的内容
• 自驱动流程
• 使用 co库
• co库和 Promise
• 接下来…

在 Genertor 中使用 thunk 函数

这个比较简单了，之前都讲过的，直接看代码即可。代码中表达的意思，是要依次读取两个文件的内容

const readFileThunk = thunkify(fs.readFile)
const gen = function* () {
    const r1 = yield readFileThunk('data1.json')
    console.log(r1)
    const r2 = yield readFileThunk('data2.json')
    console.log(r2)
}

挨个读取两个文件的内容

接着以上的代码继续写，注释写的非常详细，大家自己去看，看完自己写代码亲身体验。

const g = gen()

// 试着打印 g.next() 这里一定要明白 value 是一个 thunk函数 ，否则下面的代码你都看不懂
// console.log( g.next() )  // g.next() 返回 {{ value: thunk函数, done: false }}

// 下一行中，g.next().value 是一个 thunk 函数，它需要一个 callback 函数作为参数传递进去
g.next().value((err, data1) => {
    // 这里的 data1 获取的就是第一个文件的内容。下一行中，g.next(data1) 可以将数据传递给上面的 r1 变量，此前已经讲过这种参数传递的形式
    // 下一行中，g.next(data1).value 又是一个 thunk 函数，它又需要一个 callback 函数作为参数传递进去
    g.next(data1).value((err, data2) => {
        // 这里的 data2 获取的是第二个文件的内容，通过 g.next(data2) 将数据传递个上面的 r2 变量
        g.next(data2)
    })
})

上面 6 行左右的代码，却用了 6 行左右的注释来解释，可见代码的逻辑并不简单，不过你还是要去尽力理解，否则接下来的内容无法继续。再说，我已经写的那么详细了，你只要照着仔细看肯定能看明白的。

也许上面的代码给你带来的感觉并不好，第一它逻辑复杂，第二它也不是那么易读、简洁呀，用 Generator实现异步操作就是这个样子的？———— 当然不是，继续往下看。

自驱动流程

以上代码中，读取两个文件的内容都是手动一行一行写的，而我们接下来要做一个自驱动的流程，定义好 Generator的代码之后，就让它自动执行。完整的代码如下所示：

// 自动流程管理的函数
function run(generator) {
    const g = generator()
    function next(err, data) {
        const result = g.next(data)  // 返回 { value: thunk函数, done: ... }
        if (result.done) {
            // result.done 表示是否结束，如果结束了那就 return 作罢
            return
        }
        result.value(next)  // result.value 是一个 thunk 函数，需要一个 callback 函数作为参数，而 next 就是一个 callback 形式的函数
    }
    next() // 手动执行以启动第一次 next
}

// 定义 Generator
const readFileThunk = thunkify(fs.readFile)
const gen = function* () {
    const r1 = yield readFileThunk('data1.json')
    console.log(r1.toString())
    const r2 = yield readFileThunk('data2.json')
    console.log(r2.toString())
}

// 启动执行
run(gen)

其实这段代码和上面的手动编写读取两个文件内容的代码，原理上是一模一样的，只不过这里把流程驱动给封装起来了。我们简单分析一下这段代码

• 最后一行 run(gen)之后，进入 run函数内部执行
• 先 const g = generator()创建 Generator实例，然后定义一个 next方法，并且立即执行 next()
• 注意这个 next函数的参数是 err, data两个，和我们 fs.readFile用到的 callback函数形式完全一样
• 第一次执行 next时，会执行 const result = g.next(data)，而 g.next(data)返回的是 { value: thunk函数, done: ... }， value是一个 thunk函数， done表示是否结束
• 如果 done: true，那就直接 return了，否则继续进行
• result.value是一个 thunk函数，需要接受一个 callback函数作为参数传递进去，因此正好把 next给传递进去，让 next一直被执行下去

大家照着这个过程来捋一捋，不是特别麻烦，然后自己试着写完运行一下，基本就能了解了。

使用 co 库

刚才我们定义了一个 run还是来做自助流程管理，是不是每次使用都得写一遍 run函数呢？———— 肯定不是的，直接用大名鼎鼎的 co就好了。用 Generator的工程师，肯定需要用到 co，两者天生一对，难舍难分。

使用之前请安装 npm i co --save，然后在文件开头引用 const co = require('co')。 co到底有多好用，我们将刚才的代码用 co重写，就变成了如下代码。非常简洁

// 定义 Generator
const readFileThunk = thunkify(fs.readFile)
const gen = function* () {
    const r1 = yield readFileThunk('data1.json')
    console.log(r1.toString())
    const r2 = yield readFileThunk('data2.json')
    console.log(r2.toString())
}
const c = co(gen)

而且 const c = co(gen)返回的是一个 Promise对象，可以接着这么写

c.then(data => {
    console.log('结束')
})

co 库和 Promise

刚才提到 co()最终返回的是 Promise对象，后知后觉，我们已经忘记 Promise好久了，现在要重新把它拾起来。如果使用 co来处理 Generator的话，其实 yield后面可以跟 thunk函数，也可以跟 Promise对象。

thunk函数上文一直在演示，下面演示一下 Promise对象的，也权当再回顾一下久别的 Promise。其实从形式上和结果上，都跟 thunk函数一样。

const readFilePromise = Q.denodeify(fs.readFile)

const gen = function* () {
    const r1 = yield readFilePromise('data1.json')
    console.log(r1.toString())
    const r2 = yield readFilePromise('data2.json')
    console.log(r2.toString())
}

co(gen)

接下来…

经过了前几节的技术积累，我们用一节的时间就讲述了 Generator如何进行异步操作。接下来要介绍一个开源社区中比较典型的使用 Generator的框架 ———— Koa

第六部分，koa 中使用 Generator

koa 是一个 nodejs 开发的 web 框架，所谓 web 框架就是处理 http 请求的。开源的 nodejs 开发的 web 框架最初是 express。

我们此前说过，既然是处理 http 请求，是一种网络操作，肯定就会用到异步操作。express 使用的异步操作是传统的 callbck，而 koa 用的是我们刚刚讲的 Generator（koa v1.x用的是 Generator，已经被广泛使用，而 koa v2.x用到了 ES7 中的 async-await，不过因为 ES7 没有正式发布，所以 koa v2.x也没有正式发布，不过可以试用）

koa 是由 express 的原班开发人员开发的，比 express 更加简洁易用，因此 koa 是目前最为推荐的 nodejs web 框架。阿里前不久就依赖于 koa 开发了自己的 nodejs web 框架 egg

国内可以通过koa.bootcss.com查阅文档， 不过这网站依赖了 Google 的服务，因此如果不科学上网，估计会访问会很慢。

提醒：如果你是初学 Generator而且从来没有用过 koa ，那么这一节你如果看不懂，没有问题。看不懂就不要强求，可以忽略，继续往下看！

本节演示的代码可参考这里

本节内容概述

• koa 中如何应用 Generator
• koa 的这种应用机制是如何实现的
• 接下来…

koa 中如何应用 Generator

koa 是一个 web 框架，处理 http 请求，但是这里我们不去管它如何处理 http 请求，而是直接关注它使用 Genertor的部分————中间件。

例如，我们现在要用 3 个 Generator输出 12345，我们如下代码这么写。应该能看明白吧？看不明白回炉重造！

let info = ''
function* g1() {
    info += '1'  // 拼接 1
    yield* g2()  // 拼接 234
    info += '5'  // 拼接 5
}
function* g2() {
    info += '2'  // 拼接 2
    yield* g3()  // 拼接 3
    info += '4'  // 拼接 4
}
function* g3() {
    info += '3'  // 拼接 3
}

var g = g1()
g.next()
console.log(info)  // 12345

但是如果用 koa 的 中间件 的思路来做，就需要如下这么写。

app.use(function *(next){
    this.body = '1';
    yield next;
    this.body += '5';
    console.log(this.body);
});
app.use(function *(next){
    this.body += '2';
    yield next;
    this.body += '4';
});
app.use(function *(next){
    this.body += '3';
});

解释几个关键点

• app.use()中传入的每一个 Generator就是一个 中间件，中间件按照传入的顺序排列，顺序不能乱
• 每个中间件内部， next表示下一个中间件。 yield next就是先将程序暂停，先去执行下一个中间件，等 next被执行完之后，再回过头来执行当前代码的下一行。因此，koa 的中间件执行顺序是一种洋葱圈模型，不过这里看不懂也没问题。
• 每个中间件内部， this可以共享变量。即第一个中间件改变了 this的属性，在第二个中间件中可以看到效果。

koa 的这种应用机制是如何实现的

前方高能————上面介绍 koa 的中间价估计有些新人就开始蒙圈了，不过接下来还有更加有挑战难度的，就是以上这种方式是如何实现的。你就尽量去看，看懂了更好，看不懂也没关系————当然，你完全可以选择跳过本教程直接去看下一篇，这都 OK

加入我们自己实现一个简单的 koa ———— MyKoa ，那么仅需要几十行代码就可以搞定上面的问题。直接写代码，注意看重点部分的注释

class MyKoa extends Object {
    constructor(props) {
        super(props);

        // 存储所有的中间件
        this.middlewares = []
    }

    // 注入中间件
    use (generator) {
        this.middlewares.push(generator)
    }

    // 执行中间件
    listen () {
        this._run()
    }

    _run () {
        const ctx = this
        const middlewares = ctx.middlewares
        co(function* () {
            let prev = null
            let i = middlewares.length
            //从最后一个中间件到第一个中间件的顺序开始遍历
            while (i--) {
                // ctx 作为函数执行时的 this 才能保证多个中间件中数据的共享
                //prev 将前面一个中间件传递给当前中间件，才使得中间件里面的 next 指向下一个中间件
                prev = middlewares[i].call(ctx, prev);
            }
            //执行第一个中间件
            yield prev;
        })
    }
}

最后我们执行代码实验一下效果

var app = new MyKoa();
app.use(function *(next){
    this.body = '1';
    yield next;
    this.body += '5';
    console.log(this.body);  // 12345
});
app.use(function *(next){
    this.body += '2';
    yield next;
    this.body += '4';
});
app.use(function *(next){
    this.body += '3';
});
app.listen();

接下来…

Generator的应用基本讲完，从一开始的基础到后面应用到异步操作，再到本节的高级应用 koa ，算是比较全面了。接下来，我们要再回到最初的起点，探讨 Generator的本质，以及它和 callback的关系。

还是那句话，搞明白原理，才能用的更加出色！

第七部分，Generator 的本质是什么？是否取代了 callback

其实标题中的问题，是一个伪命题，因为 Generator和 callback根本没有任何关系，只是我们通过一些方式（而且是很复杂的方式）强行将他俩产生了关系，才会有现在的 Generator处理异步。

本节内容概述

• Generator的本质
• 和 callback的结合

Generator 的本质

介绍 Generator的第一节中，多次提到 暂停 这个词 ———— “暂停”才是 Generator的本质 ———— 只有 Generator能让一段程序执行到指定的位置先暂停，然后再启动，再暂停，再启动。

而这个 暂停 就很容易让它和异步操作产生联系，因为我们在处理异步操作时，即需要一种”开始读取文件，然后暂停一下，等着文件读取完了，再干嘛干嘛…”这样的需求。因此将 Generator和异步操作联系在一起，并且产生一些比较简明的解决方案，这是顺其自然的事儿，大家要想明白这个道理。

不过，JS 还是 JS，单线程还是单线程，异步还是异步， callback还是 callback。这一切都不会因为有一个 Generator而有任何变化。

和 callback 的结合

之前在介绍 Promise的最后，拿 Promise和 callback做过一些比较，最后发现 Promise其实是利用了 callback才能实现的。而这里， Generator也必须利用 callback才能实现。

拿介绍 co时的代码举例（代码如下），如果 yield后面用的是 thunk函数，那么 thunk函数需要的就是一个 callback参数。如果 yield后面用的是 Promise对象， Promise和 callback的联系之前已经介绍过了。

co(function* () {
    const r1 = yield readFilePromise('some1.json')
    console.log(r1)  // 打印第 1 个文件内容
    const r2 = yield readFileThunk('some2.json')
    console.log(r2)  // 打印第 2 个文件内容
})

因此， Generator离不开 callback， Promise离不开 callback，异步也离不开 callback。

求打赏

如果你看完了，感觉还不错，欢迎给我打赏 ———— 以激励我更多输出优质内容

最后，github地址是 https://github.com/wangfupeng1988/js-async-tutorial 欢迎 star 和 pr

Original: https://www.cnblogs.com/wangfupeng1988/p/6532713.html
Author: 王福朋
Title: 深入理解 JavaScript 异步系列（4）—— Generator