现代JavaScript中的异步编程：从回调到Async/Await-IJ笔记

引言：为什么需要异步编程？

在现代Web开发中，异步编程是JavaScript的核心概念之一。无论是处理用户交互、网络请求还是文件操作，异步编程都能确保应用程序保持响应性，不会因为某个耗时操作而阻塞整个界面。

1. 回调函数（Callback）

回调函数是JavaScript中最基础的异步处理方式。当一个异步操作完成时，会调用预先定义的回调函数。

// 传统回调函数示例
function fetchData(callback) {
    setTimeout(() => {
        const data = { id: 1, name: "示例数据" };
        callback(null, data); // 第一个参数是错误，第二个是数据
    }, 1000);
}

fetchData((error, result) => {
    if (error) {
        console.error("获取数据失败:", error);
    } else {
        console.log("获取到的数据:", result);
    }
});

回调函数的主要问题是”回调地狱”（Callback Hell），当多个异步操作需要顺序执行时，代码会变得难以阅读和维护。

2. Promise

ES6引入了Promise，为异步操作提供了更优雅的解决方案。Promise代表一个异步操作的最终完成（或失败）及其结果值。

// Promise示例
function fetchUserData(userId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId > 0) {
                resolve({ id: userId, name: "张三", email: "zhangsan@example.com" });
            } else {
                reject(new Error("无效的用户ID"));
            }
        }, 1000);
    });
}

// 使用Promise
fetchUserData(1)
    .then(user => {
        console.log("用户信息:", user);
        return fetchUserPosts(user.id); // 链式调用
    })
    .then(posts => {
        console.log("用户文章:", posts);
    })
    .catch(error => {
        console.error("操作失败:", error);
    });

3. Async/Await

ES2017引入了async/await语法，让异步代码看起来更像同步代码，大大提高了可读性。

// Async/Await示例
async function getUserProfile(userId) {
    try {
        // 等待用户数据
        const user = await fetchUserData(userId);
        console.log("用户基本信息:", user);
        
        // 等待用户文章
        const posts = await fetchUserPosts(user.id);
        console.log("用户文章列表:", posts);
        
        // 等待用户评论
        const comments = await fetchUserComments(user.id);
        console.log("用户评论:", comments);
        
        return { user, posts, comments };
    } catch (error) {
        console.error("获取用户资料失败:", error);
        throw error;
    }
}

// 使用async函数
async function main() {
    try {
        const profile = await getUserProfile(1);
        console.log("完整的用户资料:", profile);
    } catch (error) {
        console.error("主程序错误:", error);
    }
}

main();

4. 实际应用：并发请求处理

在实际开发中，我们经常需要同时处理多个异步请求。Promise.all和Promise.race是处理这种情况的强大工具。

// 并发请求示例
async function fetchDashboardData() {
    const [userData, postsData, statsData] = await Promise.all([
        fetchUserData(1),
        fetchUserPosts(1),
        fetchUserStats(1)
    ]);
    
    return {
        user: userData,
        posts: postsData,
        stats: statsData
    };
}

// 使用Promise.race设置超时
async function fetchWithTimeout(url, timeout = 5000) {
    const fetchPromise = fetch(url);
    const timeoutPromise = new Promise((_, reject) => {
        setTimeout(() => reject(new Error("请求超时")), timeout);
    });
    
    return Promise.race([fetchPromise, timeoutPromise]);
}