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

异步编程的重要性

在现代Web开发中，异步编程是处理I/O操作、网络请求和用户交互的核心技术。JavaScript作为单线程语言，异步编程机制尤为重要。本文将探讨JavaScript异步编程的演进历程。

1. 回调函数时代

早期的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）是这种模式的主要问题：

// 回调地狱示例
getUser(userId, (err, user) => {
    if (err) return handleError(err);
    
    getPosts(user.id, (err, posts) => {
        if (err) return handleError(err);
        
        getComments(posts[0].id, (err, comments) => {
            if (err) return handleError(err);
            console.log(comments);
        });
    });
});

2. Promise的引入

ES6引入了Promise，提供了更优雅的异步处理方式：

// Promise基本用法
function fetchUserData(userId) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId) {
                resolve({ id: userId, name: "张三", email: "zhangsan@example.com" });
            } else {
                reject(new Error("用户ID不能为空"));
            }
        }, 1000);
    });
}

// Promise链式调用
fetchUserData(123)
    .then(user => {
        console.log("用户数据:", user);
        return getUserPosts(user.id);
    })
    .then(posts => {
        console.log("用户帖子:", posts);
        return getPostComments(posts[0].id);
    })
    .then(comments => {
        console.log("评论:", comments);
    })
    .catch(error => {
        console.error("发生错误:", error);
    });

3. Async/Await语法糖

ES2017引入的async/await让异步代码看起来像同步代码：

// Async/Await示例
async function getUserProfile(userId) {
    try {
        const user = await fetchUserData(userId);
        const posts = await getUserPosts(user.id);
        const comments = await getPostComments(posts[0].id);
        
        return {
            user,
            latestPost: posts[0],
            comments
        };
    } catch (error) {
        console.error("获取用户资料失败:", error);
        throw error;
    }
}

// 并行执行优化
async function getDashboardData(userId) {
    try {
        // 使用Promise.all并行执行
        const [user, notifications, messages] = await Promise.all([
            fetchUserData(userId),
            getUserNotifications(userId),
            getUserMessages(userId)
        ]);
        
        return { user, notifications, messages };
    } catch (error) {
        console.error("获取仪表板数据失败:", error);
        throw error;
    }
}

4. 现代异步模式实践

错误处理最佳实践

// 使用async/await的错误处理
async function safeFetch(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP错误: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error("请求失败:", error);
        // 返回默认值或重新抛出
        return { error: true, message: error.message };
    }
}

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

取消异步操作

// 使用AbortController取消fetch请求
async function fetchWithCancel(url) {
    const controller = new AbortController();
    const signal = controller.signal;
    
    const timeoutId = setTimeout(() => {
        controller.abort();
        console.log("请求已取消");
    }, 3000);
    
    try {
        const response = await fetch(url, { signal });
        clearTimeout(timeoutId);
        return await response.json();
    } catch (error) {
        if (error.name === "AbortError") {
            console.log("请求被用户取消");
        } else {
            console.error("请求失败:", error);
        }
        throw error;
    }
}

5. 性能优化技巧

// 批量处理异步操作
async function batchProcess(items, processFn, batchSize = 10) {
    const results = [];
    
    for (let i = 0; i < items.length; i += batchSize) {
        const batch = items.slice(i, i + batchSize);
        const batchPromises = batch.map(item => processFn(item));
        const batchResults = await Promise.all(batchPromises);
        results.push(...batchResults);
        
        // 避免阻塞主线程
        await new Promise(resolve => setTimeout(resolve, 0));
    }
    
    return results;
}

// 使用缓存减少重复请求
function createCachedAsyncFunction(fn, cacheDuration = 60000) {
    const cache = new Map();
    
    return async function(...args) {
        const key = JSON.stringify(args);
        const cached = cache.get(key);
        
        if (cached && Date.now() - cached.timestamp < cacheDuration) {
            return cached.value;
        }
        
        const result = await fn(...args);
        cache.set(key, {
            value: result,
            timestamp: Date.now()
        });
        
        return result;
    };
}