JavaScript 中的 async 和 await 详解

在 JavaScript 中，async 和 await 是两个关键字，它们被用来简化异步编程的复杂性，特别是在处理 Promises 时。以下是关于 async 和 await 的详细解释和用法：

async 关键字

async 是一个声明函数的关键字，它将一个普通的函数转变为一个异步函数。当一个函数被声明为 async 时，该函数总是返回一个 Promise 对象。如果函数正常执行结束，则 Promise 将被成功地解决（resolve）；如果函数中抛出错误，则 Promise 将被拒绝（reject）。

语法：

async function myAsyncFunction() {
  // 异步操作
}

示例：

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

在这个例子中，fetchData 函数被声明为 async，这意味着它返回一个 Promise。函数内部使用了 await 关键字来等待 fetch 请求的结果。

await 关键字

await 只能在 async 函数内部使用。它被用来等待一个 Promise 解决（resolve）或拒绝（reject），并暂停 async 函数的执行，直到 Promise 完成。await 后面通常跟一个异步操作，如一个返回 Promise 的函数调用。

语法：

async function myAsyncFunction() {
  const result = await someAsyncOperation();
}

示例：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
}

在这个例子中，fetchData 函数使用 await 来等待 fetch 函数的结果。如果 fetch 成功，它将继续解析 JSON 并打印数据。如果 fetch 失败，它将捕获错误并打印错误信息。

错误处理

使用 async 和 await 时，错误处理非常重要。通常，我们会使用 try...catch 语句来捕获在 await 表达式中抛出的任何错误。

示例：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
}

并发执行异步操作

Promise.all 可以用来并发执行多个异步操作，并等待它们全部完成。

示例：

async function fetchMultipleUrls(urls) {
  try {
    const promises = urls.map(url => fetch(url).then(res => res.json()));
    const data = await Promise.all(promises);
    return data;
  } catch (error) {
    console.error('Error fetching multiple URLs:', error);
  }
}

在这个例子中，fetchMultipleUrls 函数接受一个 URL 数组，并使用 Promise.all 来并发地获取所有 URL 的数据。

注意事项

1. await 只能在 async 函数内部使用。
2. await 后面必须跟一个返回 Promise 的表达式。
3. 错误处理非常重要，以避免未捕获的 Promise 拒绝。

通过使用 async 和 await，JavaScript 异步编程变得更加直观和易于管理，代码的可读性和可维护性也得到了提高。