📜  ES6 中的 await 和 async 是如何工作的?(1)

📅  最后修改于: 2023-12-03 15:00:37.214000             🧑  作者: Mango

ES6 中的 await 和 async 是如何工作的?

在 ES6 中,async/await 是处理异步操作的最新技术。它们通常与 Promise 一起使用,以获得最佳的效果。在本文中,我们将重点介绍 await 和 async 的工作原理。

Await

await 关键字只能与 async 函数一起使用。当调用 async 函数时,它返回一个 Promise 对象。await 关键字可以在函数体中使用,以等待 Promise 的成功结果。在等待期间,JavaScript 引擎会释放 CPU 的控制权,同时可以执行其他任务。当 Promise 对象解析后,await 将返回 Resolved 值。

下面是一个代码示例,使用 await 等待 Promise 的解析结果:

async function example() {
  const promise = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Resolved!');
    }, 2000);
  });

  const result = await promise; // 等待 2 秒

  console.log(result); // Resolved!
}

example();

在上面的示例中,我们定义了一个 async 函数 example,该函数创建了一个 Promise 对象。然后,我们使用 await 关键字等待 Promise 对象的解析结果。在等待期间,CPU 控制权被释放,同时可以执行其他任务。当 Promise 被解析后,await 将返回解析后的 Resolved 值,并在控制台中打印出结果。

Async

async 是一个函数修饰符,可以用于标记函数是异步的。当调用 async 函数时,它会立即返回一个 Promise 对象,可以使用 then 方法处理 Promise 的结果。如果 async 函数内部抛出错误,Promise 将传递 reject 值。

下面是一个代码示例,使用 async 标记函数为异步:

async function example() {
  return "Hello, World!";
}

example().then((result) => {
  console.log(result); // Hello, World!
});

在上面的示例中,我们使用 async 标记函数 example 是异步的。当调用 example 函数时,它返回一个 Promise 对象。我们可以使用 then 方法处理 Promise 对象的结果,当 Promise 为 Resolved 时,将打印“Hello, World!”到控制台中。

为了更好地理解 await 和 async 是如何一起使用的,下面是一个综合示例:

async function example() {
  const promise1 = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Promise 1 is resolved!');
    }, 2000);
  });

  const promise2 = new Promise((resolve) => {
    setTimeout(() => {
      resolve('Promise 2 is resolved!');
    }, 3000);
  });

  const result1 = await promise1;
  console.log(result1); // Promise 1 is resolved!

  const result2 = await promise2;
  console.log(result2); // Promise 2 is resolved!

  return 'All promises are resolved!';
}

example().then((result) => {
  console.log(result); // All promises are resolved!
});

在上面的示例中,我们定义了一个 async 函数 example。该函数创建了两个 Promise 对象,并使用 await 等待这些 Promise 对象的解析结果。在等待期间,CPU 控制权被释放,同时可以执行其他任务。当两个 Promise 都被解析后,async 函数将返回 Resolved 值,并在控制台中打印出所有 Promise 解析的结果。

总之,await 和 async 是处理异步操作的最新技术,它们可以提高代码的可读性和可维护性。在使用时,只需记住 await 关键字只能与 async 函数一起使用,可以等待 Promise 对象的解析结果。