[自己动手写]使用Generator的异步库

本文将介绍Generator的一些基础使用，执行过程，以及co库的实现。

Generator

使用function*的形式申明Generator函数，并使用yield关键字返回值；执行Generator函数会返回一个遍历器对象，遍历器对象带有next方法，执行后返回的值包含value与done属性：

const g = function* g() {
  yield 'hello';
  yield 'world';
}

const iterable = g();
let v;
do {
  v = iterable.next();
  console.log(v.value, v.done);
} while(!v.done)
复制代码

输出为：

hello false
world false
undefined true
复制代码

如果代码为：

const g = function* g() {
  yield 'hello';
  return 'world';
}
复制代码

则输出为：

hello false
world true
复制代码

Generator中可以使用for循环、while循环等：

const g = function* g() {
  const arr = ['hello', 'world']
  for (let item of arr) {
    yield item
  }
}
复制代码

我们可以用for of遍历迭代器：

for (let item of g()) { console.log(item) }
// hello
// world
复制代码

可以通过设置[Symbol.iterator]来创造迭代器：

const iterable = {
  [Symbol.iterator]: function* () {
    const arr = ['hello', 'world']
    for (let item of arr) {
      yield item
    }
  }
};
for (let item of iterable) { console.log(item) }
复制代码

Generator可以通过next传入参数（从第二次调用next起，后面会解释为什么从第二次起）：

const g = function* g() {
  const arr = [];
  let v
  while(v = yield arr) { arr.push(v) }
}

const iterable = g();
console.log(iterable.next().value); // []
console.log(iterable.next(1).value); // [1]
console.log(iterable.next(2).value); // [1, 2]
复制代码

可以使用throw来抛出错误（在throw前确保先执行一次next）：

const g = function* g() {
  const arr = [];
  let v
  while(true) {
    try {
      v = yield arr
      arr.push(v)
    } catch  (err) {
      console.log('err', err)
    }
  }
}

const iterable = g();
console.log(iterable.next().value);
console.log(iterable.next(1).value);
iterable.throw('whoops');
console.log(iterable.next(2).value);

// []
// [1]
// err, whoops
// [1, 2]
复制代码

也可以由Generator抛出错误，外部捕获：

const g = function* g() {
  const hasErr = yield 1
  if (hasErr) throw 'whoops'
  yield 2
}

const iterable = g();
iterable.next();
try {
   iterable.next(true);
} catch(err) {
  console.log(err);
}
复制代码

可以用return提前结束Generator：

const g = function* g() {
  yield 1;
  yield 2;
  yield 3;
}

var iterable = g();

console.log(iterable.next()) // { value: 1, done: false }
console.log(iterable.return('foo')) // { value: 'foo', done: true }
console.log(iterable.next()) // { value: undefined, done: true }
复制代码

return会被finally捕获：

const g = function* g() {
  yield 1;
  try {
    yield 2;
    yield 3;
  } finally {
    yield 4;
    yield 5;
  }
  yield 6;
}
const iterable = g();
iterable.next() // { value: 1, done: false }
iterable.next() // { value: 2, done: false }
iterable.return(7) // { value: 4, done: false }
iterable.next() // { value: 5, done: false }
iterable.next() // { value: 7, done: true }
复制代码

Generator函数被称为“半协程”（semi-coroutine），只有Generator函数的调用者，才能将程序的执行权还给Generator函数。

执行过程

• 第一次next的执行，代码运行到第一个第一个yield之前，返回yield之后的值/表达式
• 第二次执行next，传入的参数将替换第一个yield位置的语句，并向后执行，直到下一个yield，返回值（因此第一次next传入的值是被抛弃的；同理throw之前也需要至少执行过一次next）
• 按照第二次起的逻辑，继续重复执行，直到return或不再yield

在执行yield之后，Generator等待外部调用next再执行之后的代码，在这个过程中，可以执行一些异步操作，再调用next将结果返回Generator同时将程序的执行权还给Generator并继续执行，这也是可以用Generator模拟类似async/await的同步写法的原因。

generator与异步

因此，我们可以进行这样的操作：

const getUserId = (token) => {
  setTimeout(() => {
    iterable.next(parseInt(token.split(' ')[1], 10));
  }, 0);
};

const getUserInfo = (userId) => {
  setTimeout(() => {
    iterable.next({ userId });
  }, 0);
};

const g = function* (token) {
  const userId = yield getUserId(token);
  console.log(userId);
  const data = yield getUserInfo(userId);
  console.log(data);
  return data;
};

const iterable = g('Bearer 123');
iterable.next();
复制代码

还可以使用co库：

const co = require('co');

const getUserId = (token) => {
  return Promise.resolve(parseInt(token.split(' ')[1], 10));
};

const getUserInfo = (userId) => {
  return Promise.resolve({ userId });
};

const fn = co.wrap(function* (token) {
  const userId = yield getUserId(token);
  const data = yield getUserInfo(userId);
  return data;
});

fn('Bearer 123').then(data => {
  console.log(data);
});
复制代码

自己动手实现co库

这里我们实现一个简化版的co库，我们所要做的，是实现如下过程的自动化：

• 调用Generator的next方法
• 在next返回的Promise完成时，用Promise的返回值再次调用next方法
• 反复执行第二步，直到next返回的done为true

以下是实现代码：

co函数将返回一个Promise：

const co = function (fn, ...args) {
  return new Promise((resolve, reject) => {
  	...
  });
};
复制代码

首先我们调用传入的fn来生成带有next方法的generator实例：

gen = fn.apply(this, args);
复制代码

我们需要实现next函数：在调用gen.next方法之后，我们会获得带有value和done的结果，这个结果作为参数调用next；如果done为true，则直接resolve(value)；否则，value应该是一个Promise实例，我们通过value.then注册回调。

在value.then的回调中，我们将使用（Generator外部的异步或同步方法的）返回的值继续调用gen.next，并用其返回的结果继续调用next进行处理：

const onFulfilled = function (res) {
  let ret;
  try {
    ret = gen.next(res);
  } catch (e) {
    return reject(e);
  }
  next(ret);
};
const next = function (p) {
  const { done, value } = p;
  if (done) {
    resolve(value);
  } else {
    (value.then ? value : Promise.resolve(value)).then(onFulfilled, reject);
  }
};
复制代码

最后，别忘了调用一次gen.next来启动整个过程：

onFulfilled();
复制代码

这里判断value.then并使用Promise.resolve，是为了兼容外部调用可以是同步方法的情况，例如：

const getUserId = (token) => {
  return parseInt(token.split(' ')[1], 10);
};
复制代码

最后我们实现co.wrap函数，这里进行了柯里化：

co.wrap = function (fn) {
  return function(...args) {
    return co.call(this, fn, ...args);
  };
};
复制代码

完整示例代码

const co = function (fn, ...args) {
  return new Promise((resolve, reject) => {
    gen = fn.apply(this, args);
    const onFulfilled = function (res) {
      let ret;
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    };
    const next = function (p) {
      const { done, value } = p;
      if (done) {
        resolve(value);
      } else {
        (value.then ? value : Promise.resolve(value)).then(onFulfilled, reject);
      }
    };
    onFulfilled();
  });
};
co.wrap = function (fn) {
  return function(...args) {
    return co.call(this, fn, ...args);
  };
};

// demo
const getUserId = (token) => {
  return parseInt(token.split(' ')[1], 10);
};

const getUserInfo = (userId) => {
  return Promise.resolve({ userId });
};

const fn = co.wrap(function* (token) {
  const userId = yield getUserId(token);
  const data = yield getUserInfo(userId);
  return data;
});

fn('Bearer 123').then(data => {
  console.log(data);
});
复制代码

参考

• Generator函数的语法 - 阮一峰
• tj/co

转载于:https://juejin.im/post/5d07584ef265da1b971a753d