深入浅出解析 async/await，为异步编程增添一份优雅

2023-10-31 00:21:47

在当今快节奏的互联网世界中，异步编程已成为不可或缺的一部分。它使我们能够在等待服务器响应或其他耗时操作的同时，继续执行其他任务，从而大大提高了程序的性能和响应速度。在 JavaScript 中，async/await 是处理异步编程的理想工具，它能够让您以一种更加同步的方式编写异步代码，从而简化开发过程并提高代码的可读性。

一、初识 async/await

async/await 是 JavaScript ES8 中引入的两个关键词，它们允许您以一种更加同步的方式编写异步代码。async 用于声明一个异步函数，而 await 关键字用于等待异步操作的完成。

1. async 函数

async 函数是一个特殊的函数，它可以包含 await 表达式。当调用 async 函数时，它会返回一个 Promise 对象。Promise 对象表示异步操作的结果，当异步操作完成后，Promise 对象会得到解决或拒绝。

2. await 表达式

await 表达式用于等待异步操作的完成。await 表达式只能写在 async 函数中。当执行 await 表达式时，当前函数会暂停执行，直到异步操作完成。一旦异步操作完成，await 表达式的值就会被返回，然后函数继续执行。

二、async/await 的用法

1. 基本用法

async function myAsyncFunction() {
  const result = await Promise.resolve('Hello, world!');
  console.log(result);
}

在这个例子中，myAsyncFunction 是一个 async 函数，它包含一个 await 表达式，等待 Promise.resolve('Hello, world!') 的完成。一旦 Promise 得到解决，结果就会被返回，然后函数继续执行，在控制台输出 "Hello, world!"。

2. 顺序执行多个异步操作

async/await 可以让你轻松地顺序执行多个异步操作。例如，以下代码顺序执行三个异步操作：

async function myAsyncFunction() {
  const result1 = await Promise.resolve('Hello, world!');
  const result2 = await Promise.resolve('Goodbye, world!');
  const result3 = await Promise.resolve('See you again!');
  console.log(result1, result2, result3);
}

在这个例子中，myAsyncFunction 函数顺序执行了三个异步操作，并等待每个操作的完成。一旦所有操作完成，结果就会被输出到控制台。

3. 并行执行多个异步操作

async/await 也支持并行执行多个异步操作。例如，以下代码并行执行三个异步操作：

async function myAsyncFunction() {
  const result1 = Promise.resolve('Hello, world!');
  const result2 = Promise.resolve('Goodbye, world!');
  const result3 = Promise.resolve('See you again!');

  const results = await Promise.all([result1, result2, result3]);
  console.log(results);
}