61. 如何让 Generator 的异步代码按顺序执行完毕？

// 结束了

在这个过程中，A 将执行权交给 B，也就是 A 启动 B，我们也称 A 是 B 的父协程。因此 B 当中最后 return 100其实是将 100 传给了父协程。

需要强调的是，对于协程来说，它并不受操作系统的控制，完全由用户自定义切换，因此并没有进程/线程上下文切换的开销，这是高性能的重要原因。

OK, 原理就说到这里。可能你还会有疑问: 这个生成器不就暂停-恢复、暂停-恢复这样执行的吗？它和异步有什么关系？而且，每次执行都要调用next，能不能让它一次性执行完毕呢？下一节我们就来仔细拆

解这些问题。

1. 如何让 Generator 的异步代码按顺序执行完毕？

这里面其实有两个问题:

1）Generator 如何跟异步产生关系？

2）怎么把 Generator 按顺序执行完毕？

thunk 函数

要想知道 Generator 跟异步的关系，首先带大家搞清楚一个概念——thunk函数(即偏函数)，虽然这只是实现两者关系的方式之一。(另一种方式是Promise, 后面会讲到)

举个例子，比如我们现在要判断数据类型。可以写如下的判断逻辑:

let isString = (obj) => { return Object.prototype.toString.call(obj) === '[object String]';

};

let isFunction = (obj) => { return Object.prototype.toString.call(obj) === '[object Function]';

};

let isArray = (obj) => { return Object.prototype.toString.call(obj) === '[object Array]';

};

let isSet = (obj) => { return Object.prototype.toString.call(obj) === '[object Set]';

};

// ...

可以看到，出现了非常多重复的逻辑。我们将它们做一下封装:

let isType = (type) => { return (obj) => {

return Object.prototype.toString.call(obj) === `[object ${type}]`;

}

相应的 isString和isFunction是由isType生产出来的函数，但它们依然可以判断出参数是否为 String（Function），而且代码简洁了不少。

isString("123");

isFunction(val => val);

isType这样的函数我们称为thunk 函数。它的核心逻辑是接收一定的参数，生产出定制化的函数，然后使用定制化的函数去完成功能。thunk函数的实现会比单个的判断函数复杂一点点，但就是这一点点的

复杂，大大方便了后续的操作。

Generator 和异步

thunk 版本

以文件操作为例，我们来看看异步操作如何应用于Generator。

const readFileThunk = (filename) => { return (callback) => {

fs.readFile(filename, callback);

} }

readFileThunk就是一个thunk函数。异步操作核心的一环就是绑定回调函数，而thunk函数可以帮我们做到。首先传入文件名，然后生成一个针对某个文件的定制化函数。这个函数中传入回调，这个回调

就会成为异步操作的回调。这样就让 Generator 和异步关联起来了。

紧接者我们做如下的操作:

const gen = function* () { const data1 = yield readFileThunk('001.txt')

console.log(data1.toString())

const data2 = yield readFileThunk('002.txt')

console.log(data2.toString)

}

接着我们让它执行完:

let g = gen();

// 第一步: 由于进场是暂停的，我们调用next，让它开始执行。

// next返回值中有一个value值，这个value是yield后面的结果，放在这里也就是是thunk函数生成的定制化函数，里面需要传一个回调函数作为参数

g.next().value((err, data1) => { // 第二步: 拿到上一次得到的结果，调用next, 将结果作为参数传入，程序继续执行。

// 同理，value传入回调 g.next(data1).value((err, data2) => {

g.next(data2);

002.txt的内容

上面嵌套的情况还算简单，如果任务多起来，就会产生很多层的嵌套，可操作性不强，有必要把执行的代码封装一下:

function run(gen){ const next = (err, data) => {

let res = gen.next(data);

if(res.done) return;

res.value(next);

} next();

} run(g);

再次执行，依然打印正确的结果。代码虽然就这么几行，但包含了递归的过程，好好体会一下。

这是通过thunk完成异步操作的情况。

Promise 版本

还是拿上面的例子，用Promise来实现就轻松一些:

const readFilePromise = (filename) => { return new Promise((resolve, reject) => {

fs.readFile(filename, (err, data) => { if(err) {

reject(err);

}else { resolve(data);

} })

}).then(res => res);

} const gen = function* () {

const data1 = yield readFilePromise('001.txt')

console.log(data1.toString())

const data2 = yield readFilePromise('002.txt')

console.log(data2.toString)

}

执行的代码如下:

} getGenPromise(g).then(data1 => {

return getGenPromise(g, data1);

}).then(data2 => { return getGenPromise(g, data2)

})

打印结果如下:

001.txt的内容 002.txt的内容

同样，我们可以对执行Generator的代码加以封装:

function run(g) { const next = (data) => {

let res = g.next();

if(res.done) return;

res.value.then(data => { next(data);

})

} next();

}

同样能输出正确的结果。代码非常精炼，希望能参照刚刚链式调用的例子，仔细体会一下递归调用的过程。

采用 co 库

以上我们针对 thunk 函数和Promise两种Generator异步操作的一次性执行完毕做了封装，但实际场景中已经存在成熟的工具包了，如果大名鼎鼎的co库, 其实核心原理就是我们已经手写过了（就是刚刚

封装的Promise情况下的执行代码），只不过源码会各种边界情况做了处理。使用起来非常简单:

const co = require('co');

let g = gen();

co(g).then(res =>{ console.log(res);

})

打印结果如下:

001.txt的内容 002.txt的内容

简单几行代码就完成了Generator所有的操作，真不愧co和Generator天生一对啊！