JavaScript异步编程：从回调地狱到优雅解决方案

JavaScript异步编程：从回调地狱到优雅解决方案

引言
异步编程是JavaScript的核心能力，但回调嵌套易导致"回调地狱"。本文将介绍现代JS异步处理的演进之路，助你写出更简洁高效的代码。

1. Promise：异步操作的基石

Promise 通过链式调用解决回调嵌套问题：

fetchData()
  .then(response => processData(response))
  .then(result => displayResult(result))
  .catch(error => handleError(error)); // 统一错误处理

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

用同步写法处理异步操作，提升可读性：

async function loadUserProfile() {
   
  try {
   
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    return {
    user, posts };
  } catch (error) {
   
    console.error("加载失败", error);
  }
}

3. Promise组合技：高效并发处理

使用 Promise.all 和 Promise.race 优化并行操作：

// 并行执行，全部完成后处理
const [users, products] = await Promise.all([
  fetchUsers(),
  fetchProducts()
]);

// 竞速获取最快响应
const firstResponse = await Promise.race([
  fetchFromSourceA(),
  fetchFromSourceB()
]);

4. 错误处理最佳实践

避免未处理的Promise拒绝：

// 全局捕获未处理异常
window.addEventListener('unhandledrejection', event => {
   
  event.preventDefault();
  logError(event.reason);
});

// Async函数内使用try-catch
async function criticalTask() {
   
  try {
   
    await dangerousOperation();
  } catch (err) {
   
    recoverFromFailure(err);
  }
}