async实现原理和执行逻辑总结

async作为generator的一个语法糖，await作为then命令的语法糖，是的异步操作变得很简洁，然了解其执行逻辑和原理对于一个高级前端来讲是必要的。

async中如果没有return，返回值是Promise，但是没有值；

async中如果有return，return的值会作为返回Promise的then的值

执行逻辑：

1，async内部没有异步操作，此时返回未定义的Promise，返回值为undefined,但会等代码执行完

2，async内部有异步操作和同步操作混合，返回new Promise， 但是then没有data

3，添加return  返回值作为 then的值

      

说明：

正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。

4，手动实现async

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch(e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}

或者

function spawn(genF) {
  return new Promise((resolve, reject) => {
    const hw = genF();
    const next = (value) => {
      const nextStep = hw.next();
      if(!nextStep.done){
        nextStep.value.then(next)
      }else{
        resolve(nextStep.value)
      }
    }
    next();
  })
}

说明：generator可以使用同步代码

参考：http://es6.ruanyifeng.com/#docs/async#async-%E5%87%BD%E6%95%B0%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86