JavaScript异步Callback到Async/Await的进化

1. 回调：Promise

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

fetchData()
  .then(data => process(data))
  .then(result => display(result))
  .catch(error => handleError(error)); // 统一错误处理

优势：

• 链式结构增强可读性
• 异常冒泡机制

---

2. Async/Await：同步写法的异步操作

用同步语法处理异步，搭配try/catch更健壮：

async function loadUser() {
   
  try {
   
    const user = await fetch('/user');
    const posts = await fetch(`/posts/${
     user.id}`);
    return {
    user, posts };
  } catch (err) {
   
    console.error("加载失败", err);
  }
}

 

 

---

3. 并行优化：Promise.all & allSettled

避免顺序等待，提升并发效率：

// 全部成功
const [users, products] = await Promise.all([
  fetchUsers(), 
  fetchProducts()
]);

// 部分成功
const results = await Promise.allSettled([
  fetchApiA(), 
  fetchApiB()
]);

 

 

---

4. 内存泄漏防范

常见陷阱：

// 未取消事件监听
window.addEventListener('scroll', callback); 

// 解决方案：
const controller = new AbortController();
fetch(url, {
    signal: controller.signal });
controller.abort(); // 组件卸载时调用

 

 

---

结语
异步编程演进路线：
回调 → Promise → Async/Await → RxJS
黄金法则：

1. 优先使用Async/Await
2. I/O密集型操作用Promise.all并行化
3. 及时清理未完成异步任务