17370845950

正确处理异常、避免阻塞、合理封装和控制流管理是优化async/await的关键。应使用try-catch捕获异常并细化错误范围，用Promise.all()并发执行独立任务以提升性能，将异步逻辑拆分为小函数增强可读性和可测性，并在循环中谨慎使用await，避免串行化导致的性能问题。

异步编程在现代JavaScript开发中无处不在，而async/await的出现极大提升了代码的可读性和维护性。但若使用不当，仍可能导致错误处理混乱、性能下降或逻辑错误。以下是让async/await更优雅、更可靠的实践方式。

正确处理异常：始终用try-catch包裹await调用

每一个await表达式都可能抛出异常，尤其是请求接口、文件操作等异步任务。忽略错误捕获会导致程序崩溃或难以调试。

• 使用try-catch明确捕获可能出错的异步操作
• 避免将整个函数体包在单个try块中，应细化错误范围
• 在catch中记录错误日志或返回默认值，提升健壮性

async function fetchData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Network error');
    return await res.json();
  } catch (err) {
    console.error('Fetch failed:', err);
    return null;
  }
}

避免阻塞：并发执行独立异步任务

await会暂停函数执行，若连续await多个独立请求，会造成不必要的等待。

• 使用Promise.all()并行执行互不依赖的异步操作
• 对大量任务考虑使用Promise.allSettled()避免一个失败影响整体
• 注意资源限制，避免瞬间发起过多请求

async function loadUserAndPosts(userId) {
  const [user, posts] = await Promise.all([
    fetch(`/api/users/${userId}`).then(r => r.json()),
    fetch(`/api/posts?userId=${userId}`).then(r => r.json())
  ]);
  return { user, posts };
}

合理封装：将异步逻辑拆分为小函数

把复杂的异步流程拆解成职责清晰的小函数，提高复用性和测试性。

• 每个async函数只做一件事，比如“获取数据”、“保存缓存”
• 命名体现异步特性，如fetchUserProfile、saveToStorage
• 便于单元测试和模拟（mock）

控制流管理：谨慎使用await与循环

在for循环中直接await可能导致串行执行，拉长总耗时。

• 若需顺序执行（如依赖前一步结果），使用for...of配合await
• 若任务独立，先用map生成Promise数组，再await Promise.all()

// 并发执行
const results = await Promise.all(
  ids.map(id => fetch(`/api/item/${id}`))
);

基本上就这些。用好async/await不只是语法糖，更是对异步思维的体现。写得清晰，错得少，改得快。