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. 及时清理未完成异步任务