JS 基础：实现 Generator

先看 async / await 异步解决方案

// sleep 函数，返回一个 Promise 对象
function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}

async function test() {
  // 循环 100 次
  for (let i = 0; i < 100; i++) {
    // 等待 100ms 再返回
    await sleep(100);
  }
}

通过 babel 编译成 Generator 与 Promise

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) {
              return step('next', value);
            },
            function (err) {
              return step('throw', err);
            },
          );
        }
      }
      return step('next');
    });
  };
}
function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}
let test = (function () {
  var ref = _asyncToGenerator(function* () {
    for (let i = 0; i < 100; i++) {
      yield sleep(100);
    }
  });
  return function test() {
    return ref.apply(this, arguments);
  };
})();

从上相关直观的看出来如何使用 Generator 与 Promise 进行的异步解决方案。