async await 相关内容

[weijiyang]

async await 内部实现？

async await 如何错误处理？

async await 与 Generator的区别？

async await babel转换为ES5如何实现？

[weijiyang]

根据阮一峰老师的介绍，async函数就是Generator函数的语法糖。

图片:

代码上看起来，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await。

async & Generator

实际上async函数对Generator函数的改进，体现在一下四点：

1.async函数自带执行器，所以执行方式和普通函数的执行方式一样，通过函数名+（）的方式执行。

2.async和await比起*和yield在语义上更清楚。

3.co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

4.async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

[weijiyang]

async & promise

上面说了async/await和Generator的关系，这里再说一下和Promise的关系，async/await其实是基于Promise的。async函数其实是把Promise包装了一下。

下面是一个async/await的写法：

 getConstant() {
   return 1
 }

 async getAsyncConstant() { 
  return 1
 }

 async getPromise() {
  return new Promise((resolved, rejected)=> {
    resolved(1)
  });
 }

 async test() {
  let a = 2
  let c = 1
  await getConstant();
  let d = 3
  await getPromise();
  let d = 4
  await getAsyncConstant();
  return 2
 }

上面的代码其实真正的在解析执行的时候是这样的：

function getConstant() {
   return 1;
}

function getAsyncConstant() {
  return Promise.resolve().then(function () {
   return 1;
  });
}

function getPromise() {
  return Promise.resolve().then(function () {
   return new Promise((resolved, rejected) => {
    resolved(1);
   });
  });
}

  test() {
    return Promise.resolve().then(function () {
       let a = 2;
       let c = 1;
       return getConstant();
     }).then(function () {
       let d = 3;
       return getPromise();
     }).then(function () {
       let d = 4;
       return getAsyncConstant();
     }).then(function () {
       return 2;
     });
 }

通过上面的代码可以看出async/await的本身还是基于Promise的。

因为await本身返回的也是一个Promise,它只是把await后面的代码放到了await返回的Promise的.then后面，以此来实现的。