async 和 await 的用法

在前端（JavaScript）开发中，async 和 await 是用于处理异步操作的关键字，它们使得异步代码看起来更像同步代码，从而更易读和维护。

基本用法

1. async 函数：async 关键字用来声明一个异步函数。这个函数总是返回一个 Promise 对象。

async function fetchData() {
  // 这个函数会返回一个 Promise 对象
  return "Hello, world!";
}

fetchData().then(response => {
  console.log(response); // 输出 "Hello, world!"
});

2. await 关键字：await 关键字只能在 async 函数内部使用，用于等待一个 Promise 对象的解析（即 resolved），并返回解析后的值。

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);
});

使用示例

假设你需要从一个 API 获取数据，并在获取数据后进行处理：

async function getUserData(userId) {
  try {
    // 发送请求获取用户数据
    let response = await fetch(`https://api.example.com/users/${userId}`);
    // 等待响应解析为 JSON
    let data = await response.json();
    // 处理数据
    console.log(data);
  } catch (error) {
    // 错误处理
    console.error('Error fetching user data:', error);
  }
}

// 调用异步函数
getUserData(1);

注意事项

1. 只能在 async 函数内部使用 await：await 关键字必须在一个 async 函数内使用，否则会抛出语法错误。

async function example() {
  let result = await someAsyncFunction();
  console.log(result);
}

2. 错误处理：使用 try...catch 块来捕获并处理 await 操作中的错误。

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

3. 并行异步操作：如果你有多个异步操作且它们相互独立，可以使用 Promise.all 来并行执行它们，以提高效率。

async function fetchMultipleData() {
  try {
    let [response1, response2] = await Promise.all([
      fetch('https://api.example.com/data1'),
      fetch('https://api.example.com/data2')
    ]);
    let data1 = await response1.json();
    let data2 = await response2.json();
    console.log(data1, data2);
  } catch (error) {
    console.error('Error:', error);
  }
}

总结

• async 用于声明一个异步函数，返回一个 Promise。
• await 用于等待一个 Promise 解析，并返回解析后的值。
• await 必须在 async 函数内部使用。
• 使用 try...catch 进行错误处理。
• 对于多个独立的异步操作，使用 Promise.all 以提高性能。