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

引言

在JavaScript的发展历程中，异步编程一直是开发者面临的重要挑战。从早期的回调地狱到现代的Async/Await，JavaScript的异步编程模型经历了显著的演进。本文将深入探讨这一演进过程，并通过实际代码示例展示每种模式的特点和最佳实践。

1. 回调函数时代

在ES6之前，回调函数是处理异步操作的主要方式。虽然简单直接，但嵌套过多会导致所谓的”回调地狱”。

// 传统回调模式示例
function fetchData(callback) {
    setTimeout(() => {
        const data = { id: 1, name: "示例数据" };
        callback(null, data);
    }, 1000);
}

function processData(data, callback) {
    setTimeout(() => {
        data.processed = true;
        callback(null, data);
    }, 500);
}

// 回调地狱示例
fetchData((err, data) => {
    if (err) {
        console.error("获取数据失败:", err);
        return;
    }
    
    processData(data, (err, processedData) => {
        if (err) {
            console.error("处理数据失败:", err);
            return;
        }
        
        console.log("处理后的数据:", processedData);
        // 更多嵌套回调...
    });
});

2. Promise的引入

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

// Promise基础示例
function fetchDataPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { id: 1, name: "示例数据" };
            resolve(data);
        }, 1000);
    });
}

function processDataPromise(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            data.processed = true;
            resolve(data);
        }, 500);
    });
}

// Promise链式调用
fetchDataPromise()
    .then(data => {
        console.log("获取到数据:", data);
        return processDataPromise(data);
    })
    .then(processedData => {
        console.log("处理后的数据:", processedData);
    })
    .catch(error => {
        console.error("操作失败:", error);
    });

// Promise.all并行处理
const promises = [
    fetchDataPromise(),
    fetchDataPromise(),
    fetchDataPromise()
];

Promise.all(promises)
    .then(results => {
        console.log("所有请求完成:", results);
    })
    .catch(error => {
        console.error("某个请求失败:", error);
    });

3. Async/Await革命

ES2017引入的Async/Await语法让异步代码看起来像同步代码，极大地提高了代码的可读性和可维护性。

// Async/Await示例
async function fetchAndProcessData() {
    try {
        // 等待数据获取
        const data = await fetchDataPromise();
        console.log("获取到数据:", data);
        
        // 等待数据处理
        const processedData = await processDataPromise(data);
        console.log("处理后的数据:", processedData);
        
        return processedData;
    } catch (error) {
        console.error("操作失败:", error);
        throw error;
    }
}

// 并行处理优化
async function parallelProcessing() {
    try {
        // 并行执行多个异步操作
        const [data1, data2, data3] = await Promise.all([
            fetchDataPromise(),
            fetchDataPromise(),
            fetchDataPromise()
        ]);
        
        console.log("并行获取的数据:", data1, data2, data3);
        
        // 顺序处理
        for (const data of [data1, data2, data3]) {
            const processed = await processDataPromise(data);
            console.log("顺序处理结果:", processed);
        }
    } catch (error) {
        console.error("并行处理失败:", error);
    }
}

// 错误处理模式
async function robustAsyncOperation() {
    const result = await fetchDataPromise().catch(error => {
        console.warn("获取数据失败，使用默认值");
        return { id: 0, name: "默认数据" };
    });
    
    return result;
}

4. 现代最佳实践

结合现代JavaScript特性，我们可以写出更优雅的异步代码：

// 使用箭头函数和Async/Await
const fetchUserData = async (userId) => {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status}`);
    }
    return await response.json();
};

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

// 使用Async IIFE立即执行
(async () => {
    try {
        const data = await fetchUserData(1);
        console.log("用户数据:", data);
    } catch (error) {
        console.error("获取用户数据失败:", error);
    }
})();

5. 性能优化技巧

// 1. 批量处理
async function batchProcess(items, 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 => processItem(item));
        const batchResults = await Promise.all(batchPromises);
        results.push(...batchResults);
    }
    
    return results;
}

// 2. 缓存策略
const cache = new Map();

async function cachedFetch(url) {
    if (cache.has(url)) {
        console.log("从缓存获取:", url);
        return cache.get(url);
    }
    
    console.log("发起网络请求:", url);
    const response = await fetch(url);
    const data = await response.json();
    
    cache.set(url, data);
    return data;
}

// 3. 取消请求
function createCancellableFetch() {
    let controller = new AbortController();
    
    return {
        fetch: (url) => fetch(url, { signal: controller.signal }),
        cancel: () => controller.abort()
    };
}