现代JavaScript_异步编程最佳实践

使用 async/await 提升异步代码可读性，配合 try/catch 处理错误；通过 Promise.all 实现并发执行，避免串行等待；注意避免在循环中误用 await，推荐 for...of 替代 forEach；封装错误处理逻辑，统一返回 [error, data] 格式，提升代码健壮性。

异步编程是现代 JavaScript 开发的核心部分，尤其在处理网络请求、文件操作或定时任务时。写好异步代码不仅能提升性能，还能避免阻塞主线程和回调地狱。以下是当前推荐的最佳实践。

使用 async/await 替代传统 Promise 链

虽然 Promise 已经改善了回调结构，但 async/await 让异步代码看起来更像同步代码，可读性更强。

说明：函数前加上 async 会使其返回一个 Promise，内部可用 await 等待 Promise 完成。

建议：

• 用 try/catch 捕获 await 中的错误，而不是 .catch()
• 避免在循环中无节制地 await，必要时考虑并行执行

示例：

async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error('Network error');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

合理使用 Promise.all 和 Promise.allSettled

当需要并发执行多个异步任务时，应避免串行 await，充分利用并行能力。

说明：

• Promise.all：全部成功才成功，任一失败则整体失败
• Promise.allSettled：等待所有完成（无论成功或失败），适合非强依赖场景

建议：

• 获取多个独立资源时用 Promise.all 提升效率
• 任务之间不相互影响时，用 allSettled 防止单个失败拖累整体

示例：

const results = await Promise.all([
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json())
]);

避免隐藏的异步陷阱

async/await 写起来像同步，但本质仍是异步，容易引发误解。

常见问题与建议：

• 不要忘记 await —— 忘记会导致返回的是 Promise 而非结果
• 避免在 forEach 中使用 await，应改用 for...of
• 长时间运行的异步操作应提供取消机制（如 AbortController）

错误示例：

userIds.forEach(async id => {
  await fetchUser(id); // forEach 不等待这个 await
});

正确做法：

for (const id of userIds) {
  await fetchUser(id);
}

统一错误处理机制

分散的 try/catch 会让代码臃肿，建议封装通用处理逻辑。

建议：

• 封装异步函数返回 [error, data] 格式，简化调用层判断
• 在顶层加全局异常监听（如 unhandledrejection）作为兜底
• 业务层根据错误类型做重试、提示或降级处理

封装示例：

function to(promise) {
  return promise
    .then(data => [null, data])
    .catch(error => [error, null]);
}

// 使用
const [err, data] = await to(fetch('/api/data'));

基本上就这些。掌握 async/await、合理并发、规避常见坑、统一错误处理，就能写出清晰可靠的异步代码。不复杂但容易忽略细节。