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

2,630 阅读2分钟

先上结论:

  • 执行 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 对象)。

输出结果如下图:

test1.png

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();

输出结果如下图:

test3.png

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

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

看下面的例子:

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

输出结果如下图:

test4.png

可以看到输出的是 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();

输出结果如下图:

test5.png

可以看到输出的是 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();

输出结果如下图:

test6.png

可以看到没有捕获到错误,那应该怎么做呢?没错,可以使用 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();

输出结果如下图:

test6-success.png

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