async和await原理

async

async从字面上看是异步的意思，根据MDN的概念，async是声明一个异步的构造函数。

const fn1 = async function fn() {
  return 1
}
console.log(fn1()); // Promise { 1 }

从上面的例子可以看出，在调用该函数后，返回的结果是一个Promise对象，而不是1。如果在函数中return的不是一个Promise，那么将等同于使用Promise.resolve(x)给包装起来。

const fn1 = async function fn() {
  return Promise.resolve(1)
}
console.log(fn1()); // Promise { <pending> }

await

await的字面意思是等待，不仅是等待一个Promise对象，也可以等待任意表达式的结果，并且返回处理结果只能在async函数内部使用。

const fn1 = function fn() {
  return Promise.resolve(1)
}
const fn2 = function test() {
  return 'test'
}
async function result() {
  const r1 = await fn1()
  const r2 = await fn2()
  console.log(r1, r2) // 1 test
}
result()

作用

根据上面async和await的用法和返回结果来看，在面对需要重复请求操作，但是接口参数都需要在上一个请求结果中获取的情况下，可以使用async和await来使代码更整洁。用同步方式，执行异步操作达到排队效果，解决回调地狱。

Generator

async函数是Generator函数的语法糖。
Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用 yield 语句注明调用 Generator 函数，返回的是指针对象(这是它和普通函数的不同之处)。调用指针对象的 next 方法，会移动内部指针。next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法会返回一个对象，表示当前阶段的信息(value 属性和 done 属性)。value属性是 yield 语句后面表达式的值，表示当前阶段的值；done 属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。

理解

• async 函数执行结果返回的是一个 Promise
• async 函数就是将 Generator 函数的星号(*)替换成 async，将yield 替换成 await
• async/await 就是 Generator 的语法糖，其核心逻辑是迭代执行 next 函数

总结

• async 函数是什么?一句话，它就是 Generator 函数的语法糖,
• generator 函数需要通过调用next()方法，才能往后执行到下一个yield，但是async 函数却不需要，它能够自动向后执行
• await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部，不能单独使用
• await 字面上使得 JavaScript 等待，直到 promise 处理完成，然后将结果继续下去。
• await不能工作在顶级作用域，需要将await代码包表在一个async函数中