JavaScript 异步编程：从 Callback 到 async/await 的进化

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

第一阶段：Callback 地狱

早期的异步代码长这样：

getUser(userId, function(user) {
    getPosts(user.id, function(posts) {
        getComments(posts[0].id, function(comments) {
            getLikes(comments[0].id, function(likes) {
                console.log(likes);
            });
        });
    });
});

问题：

• 代码嵌套深，难以阅读
• 错误处理复杂
• 流程控制困难

第二阶段：Promise 登场

ES6 引入了 Promise：

getUser(userId)
    .then(user => getPosts(user.id))
    .then(posts => getComments(posts[0].id))
    .then(comments => getLikes(comments[0].id))
    .then(likes => console.log(likes))
    .catch(err => console.error(err));

改进：

• 链式调用，扁平化
• 统一的错误处理
• 更好的组合性

Promise 核心概念：

const promise = new Promise((resolve, reject) => {
    // 异步操作
    if (success) {
        resolve(result);
    } else {
        reject(error);
    }
});

promise
    .then(result => {/* 成功处理 */})
    .catch(error => {/* 错误处理 */})
    .finally(() => {/* 总是执行 */});

常用 Promise 方法：

// 并行执行多个
Promise.all([p1, p2, p3])

// 等待第一个完成
Promise.race([p1, p2])

// 等待所有完成（包括失败的）
Promise.allSettled([p1, p2])

第三阶段：async/await

ES2017 引入了 async/await：

async function processUser(userId) {
    try {
        const user = await getUser(userId);
        const posts = await getPosts(user.id);
        const comments = await getComments(posts[0].id);
        const likes = await getLikes(comments[0].id);
        console.log(likes);
    } catch (err) {
        console.error(err);
    }
}

优势：

• 代码像同步一样清晰
• 可以用 try/catch 处理错误
• 调试更方便

实战对比

场景：并行请求用户数据

Promise 方式：

Promise.all([
    fetch("/user/1"),
    fetch("/user/2"),
    fetch("/user/3")
]).then(results => {
    // 处理结果
});

async/await 方式：

async function getUsers() {
    const results = await Promise.all([
        fetch("/user/1"),
        fetch("/user/2"),
        fetch("/user/3")
    ]);
    // 处理结果
}

场景：错误处理

Promise：

fetchData()
    .then(process)
    .catch(handleError);

async/await：

try {
    const data = await fetchData();
    process(data);
} catch (err) {
    handleError(err);
}

最佳实践

1. 避免串行执行独立任务

// ❌ 慢
const user = await getUser(id);
const posts = await getPosts(id);

// ✅ 快
const [user, posts] = await Promise.all([
    getUser(id),
    getPosts(id)
]);

2. 错误处理要具体

try {
    await riskyOperation();
} catch (err) {
    if (err.code === "NOT_FOUND") {
        // 特定处理
    } else {
        throw err; // 向上抛出
    }
}

3. 不要滥用 async

// ❌ 不必要
async function getValue() {
    return 42;
}

// ✅ 直接返回
function getValue() {
    return 42;
}

常见陷阱

1. forEach 中的 await

// ❌ 不会等待
items.forEach(async item => {
    await process(item);
});

// ✅ 用 for...of
for (const item of items) {
    await process(item);
}

// ✅ 或用 Promise.all
await Promise.all(items.map(process));

2. 忘记 return

// ❌
async function getData() {
    fetch("/api"); // 忘记 return
}

// ✅
async function getData() {
    return fetch("/api");
}

总结

异步编程进化史：

• Callback → 基础但混乱
• Promise → 结构化但冗长
• async/await → 清晰且强大

理解每个阶段的优劣，能在合适场景选择合适方案。

现代 JavaScript 开发，async/await 是首选，但理解 Promise 底层依然重要。