ES6 之 Generator 异步应用

1、简介

异步编程对 JavaScript 语言太重要。Javascript 语言的执行环境是 “单线程” 的，如果没有异步编程，根本没法用，非卡死不可。现在主要介绍 Generator 函数如何完成异步操作。

// 异步编程：回调函数
fs.readFile('/etc/passwd', 'utf-8', function (err, data) {
  if (err) throw err;
  console.log(data);
});

// 异步编程：Promise
var readFile = require('fs-readfile-promise');
readFile(fileA)
.then(function (data) {
  console.log(data.toString());
})
.then(function () {
  return readFile(fileB);
})
.then(function (data) {
  console.log(data.toString());
})
.catch(function (err) {
  console.log(err);
});

// 异步编程：Generator
function* gen(x) {
  var y = yield x + 2;
  return y;
}
var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }

// 异步任务的封装：异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）
var fetch = require('node-fetch');
function* gen(){
  var url = 'https://api.github.com/users/github';
  var result = yield fetch(url);
  console.log(result.bio);
}
var g = gen();
var result = g.next();
result.value.then(function(data){ // 由于 Fetch 模块返回的是一个 Promise 对象，因此要用 then 方法调用下一个 next 方法
  return data.json();
}).then(function(data){
  g.next(data);
});

2、JavaScript 语言的 Thunk 函数

在 JavaScript 语言中，Thunk 函数替换的是多参数函数，将其替换成一个只接受回调函数作为参数的单参数函数。

// 正常版本的readFile（多参数版本）
fs.readFile(fileName, callback);
// Thunk版本的readFile（单参数版本）
var Thunk = function (fileName) {
  return function (callback) {
    return fs.readFile(fileName, callback);
  };
};
var readFileThunk = Thunk(fileName);
readFileThunk(callback);

// Generator 函数自动执行，不过不适合异步操作。如果必须保证前一步执行完，才能执行后一步，则下面的自动执行就不可行。
function* gen() {
  // ...
}
var g = gen();
var res = g.next();
while(!res.done){
  console.log(res.value);
  res = g.next();
}

// Thunk 函数的自动流程管理
var fs = require('fs');
function run(generator) {
    var it = generator(go);
    function go(err, result) {
        if (err) return it.throw(err);
        it.next(result);
    }
    go();
}
run(function* (done) {
    var firstFile;
    try {
        var dirFiles = yield fs.readdir('NoNoNoNo', done); // No such dir
        firstFile = dirFiles[0];
    } catch (err) {
        firstFile = null;
    }
    console.log(firstFile);
});

3、co 模块

co 模块是著名程序员 TJ Holowaychuk 于 2013 年 6 月发布的一个小工具，用于 Generator 函数的自动执行。co 模块其实就是将两种自动执行器
（Thunk 函数和 Promise 对象），包装成一个模块。使用 co 的前提条件是，Generator 函数的 yield 命令后面，只能是 Thunk 函数或 Promise 对
象。如果数组或对象的成员，全部都是 Promise 对象，也可以使用 co。这样当异步操作有了结果就能够用 then 方法交回执行权。

// co 模块可以让你不用编写 Generator 函数的执行器，Generator 函数只要传入 co 函数，就会自动执行，并返回一个 Promise 对象
var readFile = function (fileName){
  return new Promise(function (resolve, reject){
    fs.readFile(fileName, function(error, data){
      if (error) return reject(error);
      resolve(data);
    });
  });
};
var gen = function* () {
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
var co = require('co');
co(gen);

// 基于 Promise 对象的自动执行
function getFoo() {
    return new Promise(function (resolve, reject) {
        resolve('foo');
    });
}
function run(generator) {
    var it = generator();
    function go(result) {
        if (result.done) return result.value;
        return result.value.then(function (value) {
            return go(it.next(value));
        }, function (error) {
            return go(it.throw(error));
        });
    }
    go(it.next());
}
run(function* () {
    try {
        var foo = yield getFoo();
        console.log(foo);
    } catch (e) {
        console.log(e);
    }
});

// co 源码---------------------------------------------》
var slice = Array.prototype.slice;
module.exports = co['default'] = co.co = co;
// 将生成器函数 fn 封装到函数中，这个函数执行返回 Promise
co.wrap = function (fn) {
  createPromise.__generatorFunction__ = fn;
  return createPromise;
  function createPromise() {
    return co.call(this, fn.apply(this, arguments));
  }
};
// 执行生成器函数或者迭代器，返回 Promise
function co(gen) {
  var ctx = this;
  var args = slice.call(arguments, 1);
  return new Promise(function (resolve, reject) {
    if (typeof gen === 'function') gen = gen.apply(ctx, args);  // 调用生成器函数来获得遍历器
    if (!gen || typeof gen.next !== 'function') return resolve(gen);  // 如果不是遍历器，那么直接将 Promise 状态设置为 resolved
    // 手动执行一次
    onFulfilled();
    // 成功回调函数
    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res);  // 首次启动遍历器遍历，将返回值给 ret 变量
      } catch (e) {
        return reject(e); // 如果执行失败将 Promise 状态设置为 rejected
      }
      next(ret);
      return null;
    }
    // 失败回调函数
    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err); // 抛出错误
      } catch (e) {
        return reject(e); // 将 Promise 状态设置为 rejected
      }
      next(ret);
    }
    // 主要是将 onFulfilled、onRejected 函数添加到 ret.value 或者其转化的 Promise 中的回调函数中
    function next(ret) {
      if (ret.done) return resolve(ret.value); // 如果已经遍历完成，那么返回 ret.value
      var value = toPromise.call(ctx, ret.value); // 将 ret.value 转化为 Promise
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);  // 将 onFulfilled 和 onRejected 添加到 Promise 的回调函数中
      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"')); // 如果返回的数据转化失败，那么抛出错误，将 Promise 状态设置为 rejected
    }
  });
}
// 将参数 obj 转为 Promise
function toPromise(obj) {
  if (!obj) return obj;
  if (isPromise(obj)) return obj;
  if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);  // 如果是生成器函数，那么执行 co 返回 Promise
  if ('function' == typeof obj) return thunkToPromise.call(this, obj);
  if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
  if (isObject(obj)) return objectToPromise.call(this, obj);
  return obj;
}
// 将 thunk 函数转换为 Promise
function thunkToPromise(fn) {
  var ctx = this;
  return new Promise(function (resolve, reject) {
    fn.call(ctx, function (err, res) {
      if (err) return reject(err);
      if (arguments.length > 2) res = slice.call(arguments, 1);
      resolve(res);
    });
  });
}
// 将数组转换为 Promise
function arrayToPromise(obj) {
  return Promise.all(obj.map(toPromise, this));
}
// 将 obj 转换为 Promise
function objectToPromise(obj) {
  var results = new obj.constructor(); // 获取一个新的 obj 对象 results
  var keys = Object.keys(obj);  // 获取对象的 keys
  var promises = [];
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    var promise = toPromise.call(this, obj[key]); // 将对象的 values 转为 promise 对象
    if (promise && isPromise(promise)) defer(promise, key); // 如果转换成功执行 defer
    else results[key] = obj[key]; // 如果转换失败则传值给新对象
  }
  return Promise.all(promises).then(function () { // 将所有的 promise 合并为一个新的 promise 并添加回调函数
    return results; // 返回新对象 results
  });
  function defer(promise, key) {
    // predefine the key in the result
    results[key] = undefined;   // 将新对象 results 的对应 value 设置为 undefined
    promises.push(promise.then(function (res) { // 为新 promise 添加回调函数，并将值传入 promises 数组
      results[key] = res; // 回调函数中将新对象 results 的对应 value 设置为原值
    }));
  }
}
// 判断参数 obj 是否是 promise 对象
function isPromise(obj) {
  return 'function' == typeof obj.then;
}
// 判断参数 obj 是否是迭代器
function isGenerator(obj) {
  return 'function' == typeof obj.next && 'function' == typeof obj.throw;
}
// 判断参数 obj 是否是生成器函数或者 generator 生成的迭代器
function isGeneratorFunction(obj) {
  var constructor = obj.constructor;  // ƒ GeneratorFunction() { [native code] }
  if (!constructor) return false;
  // displayName 属性将返回函数的显示名称；name(ES6) 属性返回一个函数声明的名称
  if ('GeneratorFunction' === constructor.name || 'GeneratorFunction' === constructor.displayName) return true;
  return isGenerator(constructor.prototype); // 判断是否是 generator 生成的迭代器，constructor.prototype 返回 Generator 对象
}
// 判断是否为简单对象
function isObject(val) {
  return Object == val.constructor;
}

4、Generator 应用

Generator 可以暂停函数执行，返回任意表达式的值。这种特点使得 Generator 有多种应用场景。

// 异步操作的同步化表达
function* main() {
  var result = yield request("http://some.url");
  var resp = JSON.parse(result);
    console.log(resp.value);
}
function request(url) {
  makeAjaxCall(url, function(response){
    it.next(response);
  });
}
var it = main();
it.next();

// 控制流管理（这里只适合同步操作，异步操作使用 Thunk 或者 co）
scheduler(longRunningTask(initialValue));
function scheduler(task) {
  var taskObj = task.next(task.value);
  // 如果Generator函数未结束，就继续调用
  if (!taskObj.done) {
    task.value = taskObj.value
    scheduler(task);
  }
}

// 部署 Iterator 接口
function* iterEntries(obj) {
  let keys = Object.keys(obj);
  for (let i=0; i < keys.length; i++) {
    let key = keys[i];
    yield [key, obj[key]];
  }
}
let myObj = { foo: 3, bar: 7 };
for (let [key, value] of iterEntries(myObj)) {
  console.log(key, value);
}

// 作为数据结构（Generator 使得数据或者操作，具备了类似数组的接口）
function* doStuff() {
  yield fs.readFile.bind(null, 'hello.txt');
  yield fs.readFile.bind(null, 'world.txt');
  yield fs.readFile.bind(null, 'and-such.txt');
}
for (task of doStuff()) {
  // task是一个函数，可以像回调函数那样使用它
}
function doStuff() {  // 可以用数组模拟 Generator 的这种用法
  return [
    fs.readFile.bind(null, 'hello.txt'),
    fs.readFile.bind(null, 'world.txt'),
    fs.readFile.bind(null, 'and-such.txt')
  ];
}