这一次，彻底搞懂 async...await

先上结论：

• 执行 async 函数，返回的都是 Promise 对象

• Promise.then() 对应 await

• Promise.catch() 对应 try...catch

执行 async 函数，返回的都是 Promise 对象

先看下面两个函数：

async function test1() {
  return 1;
}
async function test2() {
  return Promise.resolve(2);
}
const res1 = test1();
const res2 = test2();
console.log('res1', res1);
console.log('res1', res2);

test1 和 test2 两个函数前面都加了 async，说明这两个都是异步函数，并且如果一个函数前加了 async，那么这个函数的返回值就是一个 Promise（不论这个函数返回的是什么，都会被 JS 引擎包装成 Promise 对象）。

输出结果如下图：

Promise.then() 对应 await

1.直接在一个 await 后面加 promise 对象

看下面的代码：

async function test3() {
  const p3 = Promise.resolve(3);
  p3.then(data => {
    console.log('data', data);
  });

  const data = await p3;
  console.log('data', data);
}
test3();

输出结果如下图：

可以看到输出是相同的，这就说明了 Promise 的 then() 方法对应 await。

2.直接在一个 await 后面加一个基本数据类型的值

看下面的例子：

async function test4() {
  const data4 = await 4; // await Promise.resolve(4)
  console.log('data4', data4);
}
test4();

输出结果如下图：

可以看到输出的是 4，上面的 await 4 就相当于 await Promise.resolve(4)，又因为 await 相当于 then()，所以输出的就是 4。

3.直接在一个 await 后面加一个异步函数

看下面的例子：

async function test1() {
  return 1;
}
async function test5() {
  const data5 = await test1();
  console.log('data5', data5);
}
test5();

输出结果如下图：

可以看到输出的是 1，首先 test5() 执行，然后执行 test1()，test1 返回数字 1，相当于返回 Promise.resolve(1)，await 又相当于 then()，所以输出 1。

:::tip 提示 开发中最常用的就是第三种，await 后面跟一个异步函数，所以一定要掌握！ :::

Promise.catch() 对应 try...catch

看下面的例子：

async function test6() {
  const p6 = Promise.reject(6);
  const data6 = await p6;
  console.log('data6', data6);
}
test6();

输出结果如下图：

可以看到没有捕获到错误，那应该怎么做呢？没错，可以使用 try...catch。 看下面的例子：

async function test6() {
  const p6 = Promise.reject(6);
  try {
    const data6 = await p6;
    console.log('data6', data6);
  } catch (e) {
    console.log('e', e); // 顺利捕获错误
  }
}
test6();

输出结果如下图：

可以看到已经成功捕获到错误了！

作者：ShiYan_Chen
来源：https://juejin.cn/post/7038152028664627230