JavaScript异步编程：从回调地狱到Async/Await

JavaScript异步编程：从回调地狱到Async/Await

引言
异步编程是JS的核心能力，但回调嵌套曾让代码难以维护。本文将带你穿越异步进化史，掌握现代解决方案。

1. 回调地狱的救赎：Promise

Promise 链式调用解决嵌套噩梦：

// 传统回调嵌套
getData(function(a) {
   
  getMoreData(a, function(b) {
   
    getFinalData(b, function(c) {
   
      console.log(c);
    });
  });
});

// Promise扁平化
getData()
  .then(a => getMoreData(a))
  .then(b => getFinalData(b))
  .then(c => console.log(c))
  .catch(err => handleError(err));

2. Async/Await：同步风格的异步代码

用同步写法处理异步操作，代码更直观：

async function fetchData() {
   
  try {
   
    const a = await getData();
    const b = await getMoreData(a);
    const c = await getFinalData(b);
    console.log(c);
  } catch (err) {
   
    handleError(err);
  }
}

3. 并行优化：Promise.all加速

并发独立异步操作，提升执行效率：

// 顺序执行（慢）
const user = await getUser();
const posts = await getPosts();

// 并行执行（快）
const [user, posts] = await Promise.all([
  getUser(), 
  getPosts()
]);

4. 错误处理陷阱

避免async/await中的常见错误：

// 错误：忘记try-catch
const data = await fetchApi(); // 崩溃风险

// 正确：安全处理
try {
   
  const data = await fetchApi();
} catch (err) {
   
  console.error("API失败:", err);
}

结语
现代异步方案最佳实践：

1. 用Promise替代回调
2. Async/Await处理顺序逻辑
3. Promise.all优化并行任务
4. 始终捕获异步错误