from async to generator

想要实现 async 函数的功能，首先要明白 async 函数有哪些特点。

• 返回 Promise
• async 函数中可以使用 await 等待 Promise

以上，我们可以使用 generator 来模拟实现 async 函数，因为 yield 同样可以用来暂停恢复函数的执行。

下面我们来看看 babel 是怎么转换 async/await 的。

const xxx = async () => {
  const val = await yyy();
  return val;
}

先分析下原始代码，定义一个async 函数 xxx，这个 async 函数里面使用 await 取得 async 函数 yyy 的值赋值给 val 并返回 val。

以下是经 babel 转换得到的代码：

function _asyncToGenerator(fn) {
  return function() {
    var gen = fn.apply(this, arguments);
    return new Promise(function(resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function(value) {
              step("next", value);
            },
            function(err) {
              step("throw", err);
            }
          );
        }
      }
      return step("next");
    });
  };
}

const xxx = (() => {
  var _ref = _asyncToGenerator(function*() {
    const val = yield yyy();
    return val;
  });

  return function xxx() {
    return _ref.apply(this, arguments);
  };
})();

可以看到 xxx 使用立即执行函数的返回值初始化。在立即执行函数中，原始代码中的 async 函数的内容被放在 generator 中，并被 _asyncToGenerator 处理，await 变成了 yield。

现在来看函数 _asyncToGenerator。我们知道 async 函数会返回一个 Promise，所以 _asyncToGenerator 也要返回一个 Promise。在这个 Promise 中，会重复的执行 gen.next() 直到 done 值为 true，这时 resolve(value) 即可。