知识库

async / await 与 promise 的关系

async / await的目的为了简化使用基于 promise 的 API 时所需的语法。

async 函数一定会返回一个 promise 对象。如果一个 async 函数的返回值看起来不是 promise，那么它将会被隐式地包装在一个 promise 中。

javascript

async function foo() {
  return 1
}

// 等价于
function foo() {
  return Promise.resolve(1)
}

async 函数的函数体可以被看作是由 0 个或者多个 await 表达式分割开来的。从第一行代码直到（并包括）第一个 await 表达式（如果有的话）都是同步运行的。一个不含 await 表达式的 async 函数是会同步运行的。如果函数体内有一个 await 表达式，async 函数就一定会异步执行。（存疑）在 await 表达式之后的代码可以被认为是存在在链式调用的 then 回调中，多个 await 表达式都将加入链式调用的 then 回调中，返回值将作为最后一个 then 回调的返回值，因此只有 await 返回成功的 Promise 时才会执行接下来的代码。

javascript

async function foo() {
  await 1
}

// 等价于
function foo() {
  return Promise.resolve(1).then(() => undefined)
}

javascript

async function foo() {
  const result1 = await new Promise((resolve) => setTimeout(() => resolve('1')))
  const result2 = await new Promise((resolve) => setTimeout(() => resolve('2')))
}
foo().catch(() => {}) // 捕捉错误...

使用 await 执行两次 promise，整个foo函数的执行将会被分为三个阶段。

foo函数的第一行将会同步执行，await 将会等待 promise 的结束。然后暂停通过foo的进程，并将控制权交还给调用foo的函数。

一段时间后，当第一个 promise 完结的时候，控制权将重新回到 foo 函数内。示例中将会将成功的 promise，值为 1 作为结果返回给 await 表达式的左边即 result1。接下来函数会继续进行，到达第二个 await 区域，await 将会等待 promise 的结束，此时foo函数的进程将再次被暂停。

一段时间后，同样当第二个 promise 完结的时候，result2将被赋值为2，之后函数将会正常同步执行，将默认返回undefined 。

async / await 与 promise 的关系 ​

async / await 与 promise 的关系