async 和 await 是 JavaScript 中用于处理异步操作的语法糖，它们基于 Promise。async/await 使得异步代码更加简洁、易读，并且更接近同步代码的写法。它们在 ECMAScript 2017（ES8）中引入，是对传统回调函数（callback）和 Promise 的进一步简化。

1. async 函数

• async 关键字用于声明一个异步函数。
• 异步函数总是返回一个 Promise 对象，即使函数内部没有显式地返回 Promise，JavaScript 会自动将其包裹在一个 Promise 中。
• 在 async 函数内部，你可以使用 await 来等待异步操作的结果。

语法：

javascript
async function functionName() {
  // 函数体
}

示例：

javascript
async function fetchData() {
  return 'Hello, World!';
}

fetchData().then(result => console.log(result));  // 输出：Hello, World!

在上面的示例中，fetchData 是一个 async 函数，它返回一个 Promise，并且它自动将字符串 'Hello, World!' 包裹在一个 Promise 中。

2. await 关键字

• await 用于等待 Promise 的解决（resolve）或拒绝（reject）。它只能在 async 函数内部使用。
• await 会暂停代码的执行，直到 Promise 完成并返回结果。
• 如果 await 后面的 Promise 被解决（fulfilled），则返回 Promise 的值；如果 Promise 被拒绝（rejected），则会抛出错误。

语法：

javascript
let result = await promise;

示例：

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

fetchData().then(data => console.log(data));

在这个示例中，await 会等待 fetch() 请求完成，并返回 response 对象。接着，await 会继续等待 response.json() 解析 JSON 数据的过程。

3. async/await 与 Promise 的关系

• async/await 是基于 Promise 的语法糖。
• async 函数始终返回一个 Promise。
• await 等待一个 Promise，并获取其结果。

示例：

javascript
function getData() {
  return new Promise(resolve => {
    setTimeout(() => resolve('数据获取成功！'), 2000);
  });
}

async function fetchData() {
  const result = await getData();
  console.log(result);  // 输出：数据获取成功！
}

fetchData();

在这个示例中，getData() 返回一个 Promise，而 await 会等待这个 Promise 被解决，接着输出结果。

4. 错误处理

async/await 使得处理异步错误变得更简单。在传统的 Promise 中，错误处理通常需要通过 .catch() 来完成；而在 async/await 中，你可以使用 try/catch 来捕获和处理错误。

示例：

javascript
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('请求失败');
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('发生错误:', error);  // 错误处理
  }
}

fetchData();

在这个示例中，try/catch 用于捕获 fetch() 或 json() 方法中的任何错误。例如，网络错误或响应码不是 2xx 时，都会抛出错误并被 catch 捕获。

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

使用 await 会让代码按顺序执行，即等待当前 Promise 完成后才会继续执行下一行代码。但是，如果你有多个独立的异步操作，可以使用 Promise.all() 来并行处理这些操作，从而提高效率。

示例：

javascript
async function fetchData() {
  let response1 = fetch('https://api.example.com/data1');
  let response2 = fetch('https://api.example.com/data2');
  
  // 使用 Promise.all() 并行处理两个请求
  let results = await Promise.all([response1, response2]);
  
  const data1 = await results[0].json();
  const data2 = await results[1].json();
  
  console.log(data1, data2);
}

fetchData();

在这个示例中，response1 和 response2 两个请求并行发起，Promise.all() 会等待这两个 Promise 都解决后，才会继续执行并处理结果。

6. async/await 的优势

• 简洁：比起传统的回调函数和 .then() 链式调用，async/await 使得异步代码更接近同步代码，减少了嵌套和回调地狱。
• 错误处理：使用 try/catch 语法处理错误，比起在 .then() 或 .catch() 中捕获错误更加直观。
• 可读性：使得代码流更加自然，尤其是多个异步操作时，使用 async/await 可以避免深层的嵌套。

7. async/await 的局限性

• 只能在 async 函数中使用：await 只能在声明为 async 的函数内部使用。要在非 async 函数中使用 await，需要将其包裹在一个 async 函数中。
• 阻塞单个线程：尽管 await 等待的是异步操作，但它会阻塞当前 async 函数的执行，直到 Promise 完成。在高并发场景中，可能需要注意这种阻塞行为。
• 不支持同步操作：async/await 仅适用于 Promise 对象，无法直接处理像传统的同步操作那样的代码。

8. async/await 与传统回调函数的比较

特性	回调函数	Promise	async/await
语法复杂性	高（回调地狱）	中等（链式调用）	低（类似同步代码）
错误处理	回调函数嵌套导致复杂	使用 .catch()	使用 try/catch，更加简洁
可读性	差，难以维护	中等，代码清晰	高，逻辑顺序明确
并行处理多个请求	比较复杂	.all() 方法	Promise.all()

9. 总结

• async/await 是基于 Promise 的语法糖，使得异步操作的写法更加直观、简洁，并且易于维护。
• async 函数自动返回一个 Promise，即使没有显式返回 Promise，也会将返回值封装为 Promise。
• await 等待一个 Promise，并获取其解析的结果。
• 使用 async/await 可以避免回调地狱，使得异步代码看起来更像同步代码，极大提升了代码的可读性和可维护性。

它是处理异步操作时非常强大的工具，适用于现代 JavaScript 编程，并且广泛应用于各种网络请求、数据处理等场景中。