ES6 async 函数

async函数

---

标题	内容
async的引入	AsyncFunction构造函数, Generator
async的含义	async函数是什么?
async的特点	内置执行器, 更好的语义, 更广的适用性, 返回值是Promise
async的实现原理	Generator函数, 自动执行器

---

async的引入

• ES2017标准引入了async函数，使得异步操作变得更加方便。也可以说是Generator的语法糖。

(了解)AsyncFunction构造函数

• AsyncFunction构造函数用来创建新的异步函数对象，JavaScript中每个异步函数都是AsyncFunction的对象。

async function asyncFunction(){
   }
asyncFunction.constructor
// AsyncFunction() { [native code] }

• 注意: AsyncFunction并不是全局对象，需要通过下面的方法来获取:

Object.getPrototypeOf(async function(){
   }).constructor
// AsyncFunction() { [native code] }

AsyncFunction语法

new AsyncFunction([arg1[, arg2[, ...argN]],] functionBody)

AsyncFunction参数

• arg1, arg2, ... argN: 函数的参数名，它们是符合JavaScript标示符规范的一个或多个用逗号隔开的字符串。例如x, theValue或a, b。

• functionBody: 一段字符串形式的JavaScript语句，这些语句组成了新函数的定义。

function resolveAfter2Seconds(x) {
   
  return new Promise(resolve => {
   
    setTimeout(() => {
   
      resolve(x);
    }, 2000);
  });
}

var AsyncFunction = Object.getPrototypeOf(async function(){
   }).constructor;
var a = new AsyncFunction('a',
                          'b',
                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
a(10, 20).then(v => {
   
  console.log(v); // 4 秒后打印 30
});

• 执行AsyncFunction构造函数的时候，会创建一个异步函数对象。但是这种方式不如先用异步函数表达式定义一个异步函数，然后再调用其来创建异步函数对象来的高效，因为第二种方式中异步函数是与其他代码一起被解释器解析的，而第一种方式的函数体是单独解析的。
• 传递给AsyncFunction构造函数的所有参数，都会成为新函数中的变量，变量的名称和定义顺序与各参数相同。
• 注意: 使用AsyncFunction构造函数创建的异步函数并不会在当前上下文中创建闭包，其作用域始终是全局的。因此运行的时候只能访问它们自己的本地变量和全局变量，但不能访问构造函数被调用的那个作用域中的变量。这是它与eval不同的地方(eval函数最好永远也不要使用)。

/**
 * @description 自己的本地变量和全局变量
*/
function resolveAfter2Seconds(x) {
   
  return new Promise(resolve => {
   
    setTimeout(() => {
   
      resolve(x);
    }, 2000);
  })
}

var c = 1;
var AsyncFunction = Object.getPrototypeOf(async function(){
   }).constructor;

var a = new AsyncFunction('a', 'b', 'c', 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b) + await resolveAfter2Seconds(c);');
a(10, 20, c).then(v => {
   
  console.log(v);
})

/**
 * @description 建议: 永远不要使用eval
*/
function test() {
   
  var x = 2, y = 4;
  console.log(eval('x + y'));  // 直接调用，使用本地作用域，结果是 6
  var geval = eval; // 等价于在全局作用域调用
  console.log(geval('x + y')); // 间接调用，使用全局作用域，throws ReferenceError 因为`x`未定义
  (0, eval)('x + y'); // 另一个间接调用的例子
}

• 调用AsyncFunction构造函数时可以省略new，其效果是一样的。

---

async函数

• async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例，并且其中允许使用await关键字。
• async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

function resolveAfter2Seconds() {
   
  return new Promise(resolve => {
   
    setTimeout(() => {
   
      resolve('resolved');
    }