JavaScript 异步编程——从回调地狱到优雅的 async/await

#1 发表于 2026-03-21 00:56:52

异步是 JavaScript 的核心特性，但错误的管理方式会导致代码难以维护。本文回顾异步演进史，并给出最佳实践。

1. 回调地狱

早期使用回调函数处理异步，多个依赖请求会导致代码层层嵌套，难以阅读和调试。

getUser(1, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});

2. Promise 链式调用

Promise 将嵌套转为链式，但仍有 then 链过长的问题。

getUser(1)
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error(err));

3. async/await 终极方案

用同步写法处理异步逻辑，配合 try/catch 捕获错误。

async function displayComments() {
  try {
    const user = await getUser(1);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
  } catch (error) {
    console.error('异步出错:', error);
  }
}

并发优化

当多个异步任务无依赖时，应使用 Promise.all 或 Promise.allSettled 并行执行。

async function loadUsers() {
  const [userA, userB] = await Promise.all([getUser(1), getUser(2)]);
  return [userA, userB];
}

错误处理最佳实践

每个 async 函数内用 try/catch 捕获本函数内的错误
在调用层统一处理未被捕获的异常
避免在循环中逐个 await，改用 Promise.all 提升性能