async/await如何使用？

如果你已经对JavaScript的Promise有所了解，但厌倦了无尽的.then()链，那么async/await就是为你准备的语法糖。它让基于Promise的异步代码看起来和同步代码一样直观，极大地提升了可读性和可维护性，是处理现代JavaScript异步流程的首选方式。

async函数的基本声明

async关键字用于声明一个函数是异步的。你只需在普通函数前加上它。这个函数有一个关键特性：它总会返回一个Promise。如果函数内返回一个非Promise值，它会被自动包装成一个已解决的Promise。

async function fetchData() {
  return '这是数据';
}
// 调用async函数得到的是一个Promise
fetchData().then(data => console.log(data));

即使函数体里只是返回一个字符串，调用fetchData()得到的依然是一个Promise对象，你可以用.then()来获取其值。

await表达式的等待机制

await关键字只能在async函数内部使用。它的作用是“暂停”async函数的执行，等待其后的一个Promise落定（解决或拒绝）。如果等待的是Promise，await会返回其解决的值；如果等待的不是Promise，则直接返回该值。

async function getUser() {
  // 假设fetch返回一个Promise
  const response = await fetch('/api/user');
  const data = await response.json(); // 等待解析JSON
  return data.name;
}

在这段代码中，执行到await fetch(...)时，函数会暂停，直到网络请求完成且Promise解决，将响应对象赋值给response变量，然后才继续向下执行。这使得异步的数据请求和转换逻辑能以顺序的方式书写。

错误处理的常规做法

由于await会“抛出”被拒绝的Promise，我们需要用try...catch块来捕获错误，这和处理同步代码的错误方式完全一致。

async function loadContent() {
  try {
    const data = await fetchUnreliableApi();
    console.log('成功：', data);
  } catch (error) {
    console.error('请求失败：', error);
  } finally {
    console.log('加载尝试结束');
  }
}

这种错误处理方式比在Promise链中使用多个.catch()要清晰和集中得多，所有的成功路径和异常路径都结构性地组织在一起。

在实际项目中，你可以在大多数返回Promise的函数调用前使用await。但要注意，滥用await可能会导致不必要的顺序等待。如果多个异步操作之间没有依赖关系，应该使用Promise.all()来让它们并发执行。

async function fetchDashboard() {
  const [user, posts] = await Promise.all([
    fetch('/api/user'),
    fetch('/api/posts')
  ]);
  // ... 处理数据
}

记住，async/await并没有取代Promise，它只是建立在Promise之上的更优雅的语法。它让异步代码的逻辑流变得一目了然，大大降低了编写和维护复杂异步逻辑的心智负担。