JavaScript 异步编程：从 Callback 到 Async/Await 的演进

JavaScript 的异步编程经历了三次重大演进。理解这段历史，能帮你写出更优雅的异步代码。

第一阶段：Callback 地狱

早期的异步代码长这样：

getData(function(a) {
    getMoreData(a, function(b) {
        getMoreData(b, function(c) {
            getMoreData(c, function(d) {
                console.log("Done", d);
            });
        });
    });
});

这就是臭名昭著的"回调地狱"——代码向右无限延伸，难以阅读和维护。

第二阶段：Promise 时代

ES6 引入了 Promise，代码变成：

getData()
    .then(a => getMoreData(a))
    .then(b => getMoreData(b))
    .then(c => getMoreData(c))
    .then(d => console.log("Done", d))
    .catch(err => console.error(err));

Promise 的优势：

• 链式调用，代码扁平化
• 统一的错误处理
• 可以组合多个异步操作

Promise 的局限：

• 链式调用仍然不够直观
• 中间变量难以复用
• 调试时断点不够友好

第三阶段：Async/Await

ES2017 引入了 async/await，代码终于像同步代码了：

async function processData() {
    try {
        const a = await getData();
        const b = await getMoreData(a);
        const c = await getMoreData(b);
        const d = await getMoreData(c);
        console.log("Done", d);
    } catch (err) {
        console.error(err);
    }
}

Async/Await 的优势：

• 代码读起来像同步代码
• 可以轻松使用中间变量
• 调试体验极佳
• 错误处理用 try/catch，符合直觉

实战对比

场景：并行请求多个接口

// Promise 方式
Promise.all([fetchUser(), fetchPosts(), fetchComments()])
    .then(([user, posts, comments]) => {
        // 处理数据
    });

// Async/Await 方式
const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments()
]);

最佳实践

1. 始终用 try/catch 包裹 await
2. 并行请求用 Promise.all，不要串行 await
3. 顶层用 IIFE 或模块级 async
4. 避免在循环中串行 await

// ❌ 慢：串行请求
for (const id of ids) {
    const data = await fetch(id);
}

// ✅ 快：并行请求
const results = await Promise.all(ids.map(id => fetch(id)));

结语

从 Callback 到 Async/Await，JavaScript 异步编程越来越优雅。掌握 async/await，让你的异步代码像同步代码一样清晰！

---

你现在还在用回调吗？评论区聊聊你的异步编程经历！