async/await：从语法糖到并发优化的异步编程

一、async/await 的核心概念

1. 什么是 async/await？

async/await 是 ES2017 引入的异步编程语法糖，它的本质是对 Promise 和 Generator 的封装。它通过声明式的方式简化异步代码，使异步逻辑更接近同步代码的直观性，解决了一些传统 Promise.then().then() 链式调用嵌套过深的问题。

2. 核心特性

async 函数：
- 函数前加 async 关键字后，函数体内的返回值会自动包装成 Promise。
- 示例：
  javascript 复制代码
```
async function foo() {
  return "Hello";
}
// 等价于
function foo() {
  return Promise.resolve("Hello");
}
```
await 表达式：
- await 后必须接一个 Promise，它会暂停当前 async 函数的执行，直到 Promise 完成（resolve 或 reject）。
- 关键点 ：
  - await 并未阻塞主线程，而是将后续代码封装到 Promise.then() 中异步执行。
  - 示例：
    javascript 复制代码
```
async function foo() {
  const a = await bar(); // 暂停执行，等待 bar() 返回的 Promise
  return a + 1;
}
// 等价于
function foo() {
  return bar().then(a => a + 1);
}
```

二、async/await 的底层实现机制

1. 状态机与 Generator 的关系

async 函数内部会被编译器转换为一个 状态机 ，其核心思想来源于 Generator（生成器）。

Generator 的特点 ：
- 用 function* 声明，通过 yield 暂停函数执行。
- 每次调用 next() 会从上次暂停的位置继续执行。

示例：

javascript 复制代码

// 生成器函数示例
function* idGenerator() {
  let id = 1;
  while (id < 4) {
    yield id++; // 中断并返回 id，暂停执行
  }
}

const gen = idGenerator();

// 迭代器调用
console.log(gen.next().value); // 1
console.log(gen.next().value, gen.next().done); // 2, false
console.log(gen.next().value, gen.next().done); // 3, true

运行结果分析：

第一次调用 gen.next()：函数开始执行，遇到 yield 1 暂停，返回 { value: 1, done: false }。
第二次调用 gen.next()：从上次暂停的位置继续执行，id 自增为 2，遇到 yield 2 暂停，返回 { value: 2, done: false }。
第三次调用 gen.next()：id 自增为 3，遇到 yield 3 暂停，返回 { value: 3, done: false }。
第四次调用 gen.next()：循环条件 id < 4 不成立，函数执行结束，返回 { value: undefined, done: true }。

结论：

Generator 通过 yield 控制函数执行流程，每次调用 next() 恢复执行并暂停。
Generator 的状态机特性是 async/await 的底层基础。

2. async 函数的编译过程

async 函数内部的 await 表达式会被编译器转换为 yield，整个函数被包装成一个状态机。

示例：

javascript 复制代码

async function foo() {
  const a = await bar();
  const b = await baz();
  return a + b;
}
// 编译后类似：
function foo() {
  return bar().then(a => {
    return baz().then(b => {
      return a + b;
    });
  });
}

三、并发处理的最佳实践

1. 避免顺序执行导致的性能瓶颈

如果多个异步操作彼此独立，顺序使用 await 会串行执行，导致总耗时等于各操作耗时之和。

问题示例：

javascript 复制代码

async function sequential() {
  const a = await fetchA(); // 耗时 1s
  const b = await fetchB(); // 耗时 1s
  return a + b;
}
// 总耗时：2s

优化方案 ：使用 Promise.all 并发执行：

javascript 复制代码

async function parallel() {
  const [a, b] = await Promise.all([fetchA(), fetchB()]);
  return a + b;
}
// 总耗时：1s（取决于最慢的操作）

2. Promise.all 的适用场景

适用场景：多个异步操作彼此独立且需同时完成后再处理结果。
注意事项 ：
- 如果任一 Promise 被拒绝，Promise.all 会立即拒绝。
- 可用 Promise.allSettled 替代以获取所有结果（无论成功或失败）。

四、常见误区与注意事项

1. 错误捕获的陷阱

错误示例：

javascript 复制代码

async function foo() {
  try {
    await Promise.reject("Oops!");
  } catch (e) {
    console.log("Caught:", e);
  }
}

正确行为 ：catch 会捕获到错误。

错误示例：

javascript 复制代码

async function foo() {
  if (!await someAsyncCheck()) {
    // 如果 someAsyncCheck() 被拒绝，此处不会触发 catch
  }
}

解决方案 ：对 await 单独包裹 try/catch。

2. 避免滥用 async/await

适合场景：需要严格顺序依赖的异步操作（如登录后获取数据）。
不适合场景：大量并发请求或需细粒度控制错误处理的场景（如逐个重试失败请求）。

五、实际应用场景

1. 接口调用的链式处理

javascript 复制代码

async function getUserData(userId) {
  const user = await fetchUser(userId);
  const posts = await fetchPostsByUser(user.id);
  return { user, posts };
}

2. 多接口并发查询

javascript 复制代码

async function getDashboardData() {
  const [userStats, recentPosts, notifications] = await Promise.all([
    fetchUserStats(),
    fetchRecentPosts(),
    fetchNotifications()
  ]);
  return { userStats, recentPosts, notifications };
}

六、总结

特性	说明
语法简洁性	用同步风格编写异步代码，避免回调地狱。
错误处理集中化	通过 `try/catch` 统一捕获异步错误。
底层实现	基于 `Promise` 和 `Generator`，通过编译器转换为状态机。
性能优化建议	使用 `Promise.all` 并发处理独立异步操作，避免串行执行。
适用场景	有顺序依赖的异步操作、需要简化代码复杂度的场景。

async/await 是现代 JavaScript 异步编程的核心工具，但需结合实际场景合理使用。理解其底层机制和并发优化策略，能显著提升代码的可读性和性能表现。