Async 和 Await:让异步编程更简单

47 阅读2分钟

在 JavaScript 中,异步编程一直是开发中的一个重要部分。从早期的回调函数到 Promise 的出现,异步编程的方式不断演变。ES7 引入了 asyncawait 关键字,进一步简化了异步代码的编写,使其更加接近同步代码的风格。

1. async

async 关键字用于修饰函数,表示该函数是一个异步函数。异步函数总是返回一个 Promise 对象。如果函数返回的是一个非 Promise 值,它会被自动包装成一个状态为 fulfilled 的 Promise 对象。

async function method1() {
  return 1; // 返回值被包装成 Promise
}

method1().then((value) => {
  console.log(value); // 1
});

如果函数返回的是一个 Promise 对象,那么异步函数返回的 Promise 对象的状态和值会与返回的 Promise 一致。

async function method2() {
  return Promise.resolve(1); // 返回的是 Promise 对象
}

method2().then((value) => {
  console.log(value); // 1
});

如果函数执行过程中抛出异常,异步函数返回的 Promise 对象会变为 rejected 状态。

async function method3() {
  throw new Error('出错了'); // 抛出异常
}

method3().catch((error) => {
  console.log(error.message); // "出错了"
});

2. await

await 关键字用于等待一个 Promise 对象完成。它必须用在 async 函数中。await 会暂停当前函数的执行,直到等待的 Promise 对象完成。

async function method() {
  const n = await Promise.resolve(1); // 等待 Promise 完成
  console.log(n); // 1
}

method();

如果等待的 Promise 对象成功完成,await 会返回 Promise 的值;如果 Promise 失败,await 会抛出异常。

async function method() {
  try {
    const n = await Promise.reject(123); // 等待失败的 Promise
    console.log('成功', n);
  } catch (err) {
    console.log('失败', err); // "失败 123"
  }
}

method();

await 也可以等待非 Promise 值,这些值会被自动包装成一个状态为 fulfilled 的 Promise 对象。

async function method() {
  const n = await 1; // 等同于 await Promise.resolve(1)
  console.log(n); // 1
}

method();

总结

asyncawait 是 ES7 引入的两个关键字,用于简化异步编程。async 用于修饰函数,表示该函数返回一个 Promise 对象;await 用于等待一个 Promise 对象完成,暂停当前函数的执行。通过 asyncawait,我们可以写出更加简洁、易读的异步代码,让异步编程变得更加简单和直观。