co库之如何将generator函数转化成类async函数

0.243字数 303阅读 130

让我们来想想generator函数和async有啥区别?唯一的区别是async函数会自动执行,而generator每次需要调用next函数。仅此而已。

首先我们来看一个简单的例子

function *gen() {
  yield new Promise(((resolve, reject) => {resolve()}))
  yield new Promise(((resolve, reject) => {resolve()}))
  yield new Promise(((resolve, reject) => {resolve()}))
}

这是一个很简单的generator,接下来看我怎么写的

let g = gen();
let ret = g.next;
ret.value.then(() => {
  g.next();
})

哈哈哈,现在就大功告成啦。我们只要找到一个适当的办法让g.next()一直持续下去就可以做到自动执行啦。
所以关键是yield后的value必须是一个promise,那现在让我们来看看co是怎么把这些东西都转化成promise的吧!

function co(gen) {
  var ctx = this; //  把上下文转化成当前调用co的对象
  var args = slice.call(arguments, 1) // 获取参数

  // we wrap everything in a promise to avoid promise chaining,
  // which leads to memory leak errors.
  // see https://github.com/tj/co/issues/180
  // 不管你的gen是什么, 都先用Promise包裹起来
  return new Promise(function(resolve, reject) {
    // 如果gen是函数, 则修改gen的this为co中的this对象并执行gen

    if (typeof gen === 'function') gen = gen.apply(ctx, args);

    // 因为执行了gen,现在的gen是一个有next和value的对象 如果gen不存在或者不是函数不是generator 则直接返回gen

    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    // 开始执行上一个代码段类似的g.next()
    onFulfilled();

    /**
     * @param {Mixed} res
     * @return {Promise}
     * @api private
     */

    function onFulfilled(res) {
      var ret;
      try {
        ret = gen.next(res); // 执行每一个gen.next()
      } catch (e) {
        return reject(e);
      }
      next(ret); // 把执行得到的返回值传入next函数中。next函数是自动执行的关键
    }

    /**
     * @param {Error} err
     * @return {Promise}
     * @api private
     */

    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    /**
     * Get the next value in the generator,
     * return a promise.
     *
     * @param {Object} ret
     * @return {Promise}
     * @api private
     */

    function next(ret) {
      // 如果ret.done = true 说明已经迭代完毕,返回最后一次迭代的value
      if (ret.done) return resolve(ret.value);

      // 把无论ret.value里是什么都转化成Promise,且把上下文指向ctx
      var value = toPromise.call(ctx, ret.value);
      // then()方法里第一个参数是onCompleted, 第二个参数是onRejected

      // 如果value是promise对象且存在 那继续在then方法中调用onFulfilled
      // 相当于从头开始
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);

      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"'));
    }
  });
}

代码比较长,大家可以先看注释再看我下面写的话。
所以co的思想就是把一个generator函数封装在一个promise对象里,然后在这个promise对象中再次把它g.next()的对象也封装成promise对象,当这个子promise对象完成的时候重复调用g.next()。当所有迭代完成时,把父promise对象resolve掉。这就成了一个类async函数了。

大神写的代码太美了,既简洁又抽象。真的美呀!

推荐阅读更多精彩内容

  • ES6 http://es6.ruanyifeng.com 目录 1 let 和 const 命令 2 变量的解构...
  • 异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本...
  • 含义 async函数是Generator函数的语法糖,它使得异步操作变得更加方便。 写成async函数,就是下面这...
  • async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 async 函数是...
  • 传统方法 ES6诞生以前,异步编程的方法,大概有下面四种。 回调函数 事件监听 发布/订阅 Promise对象 G...