#Js篇：async函数await 命令

news2024/11/18 2:33:50

async函数

定义

是 Generator 函数的语法糖。

Generator 函数的引入为 JavaScript 中异步编程提供了一种更为直观和易于理解的方式

async函数的返回值是Promise对象，

基本用法

使用 async 关键字声明的函数会自动返回一个 Promise 对象，无需手动创建。这使得异步函数更容易与其他异步操作协同工作。

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。

当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

async function f() {
  return 'hello world';
}

f().then(v => console.log(v))
// "hello world"

async函数内部return语句返回的值，会成为then方法回调函数的参数。

上面代码中，函数f内部return命令返回的值，会被then方法回调函数接收到

async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

await命令

定义

正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。

错误处理

如果await后面的异步操作出错，那么等同于async函数返回的Promise对象被reject。

防止出错的方法，也是将其放在try...catch代码块之中

如果有多个await命令，可以统一放在try...catch结构中。

async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}

使用注意点

第一点，前面已经说过，await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中。

第二点，多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

上面代码中，getFoo和getBar是两个独立的异步操作（即互不依赖），被写成继发关系。这样比较耗时，因为只有getFoo完成以后，才会执行getBar，完全可以让它们同时触发。

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

上面两种写法，getFoo和getBar都是同时触发，这样就会缩短程序的执行时间。

第三点，await命令只能用在async函数之中，如果用在普通函数，就会报错。

async 函数与 Promise的区别

返回值类型：
- async 函数总是返回一个 Promise 对象。即使在函数内部使用 return 返回非 Promise 类型的值，它也会被隐式地包装成一个解决的 Promise 对象。
- 普通函数返回的是函数执行的结果，而 async 函数返回的是一个 Promise 对象。
语法简洁性：
- async 函数的语法更为简洁，可以使用 await 关键字来等待异步操作的完成，而不需要手动创建 Promise 链。
- Promise 需要通过 .then() 或 .catch() 来处理异步操作的结果，导致可能出现较深的嵌套（回调地狱）。
错误处理：
- async 函数内部可以使用 try...catch 来捕获和处理异步操作的错误，使得错误处理更加方便。
- 在 Promise 中，错误处理通常通过 .catch() 方法，或者在 .then() 中的第二个参数进行。
使用场景：
- async 函数适用于更直观地编写异步代码，特别是在处理多个异步操作时。
- Promise 通常用于处理单一的异步操作，或者在不使用 async/await 语法的情况下进行异步编程。
await 的使用：
- await 只能在 async 函数内部使用，用于等待一个 Promise 对象解决，并返回其解决值。
- 在普通函数或全局作用域中，无法使用 await 关键字。
可读性：
- 使用 async/await 语法可以使异步代码更加直观和可读，避免了回调地狱，提高了代码的可维护性。
- Promise 链的可读性较差，尤其是在处理多个异步操作时。