精通 JavaScript 并发：深入解析 Promise 并行处理

            
async function fetchDashboardDataSequentially(userId) {
    console.time('sequentialFetch');

    console.log('Fetching user profile...');
    const userProfile = await fetchUserProfile(userId); // Waits here

    console.log('Fetching user posts...');
    const userPosts = await fetchUserPosts(userId); // Waits here

    console.log('Fetching user notifications...');
    const userNotifications = await fetchUserNotifications(userId); // Waits here

    console.timeEnd('sequentialFetch');
    return { userProfile, userPosts, userNotifications };
}

// Imagine these functions take time to resolve
// fetchUserProfile -> 500ms
// fetchUserPosts -> 800ms
// fetchUserNotifications -> 1000ms

            

              
                Copy
              
            
          

            
async function fetchDashboardDataConcurrently(userId) {
    console.time('concurrentFetch');

    console.log('Initiating all fetches at once...');
    const profilePromise = fetchUserProfile(userId);
    const postsPromise = fetchUserPosts(userId);
    const notificationsPromise = fetchUserNotifications(userId);

    // Now we wait for all of them to complete
    const [userProfile, userPosts, userNotifications] = await Promise.all([
        profilePromise,
        postsPromise,
        notificationsPromise
    ]);

    console.timeEnd('concurrentFetch');
    return { userProfile, userPosts, userNotifications };
}

            

              
                Copy
              
            
          

            
// Helper to simulate API calls
const mockApiCall = (value, delay, shouldFail = false) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (shouldFail) {
                reject(new Error(`API call failed for: ${value}`));
            } else {
                console.log(`Resolved: ${value}`);
                resolve({ data: value });
            }
        }, delay);
    });
};

async function loadCriticalData() {
    console.log('Using Promise.all for critical data...');
    try {
        const [profile, settings, permissions] = await Promise.all([
            mockApiCall('userProfile', 400),
            mockApiCall('userSettings', 700),
            mockApiCall('userPermissions', 500)
        ]);
        console.log('All critical data loaded successfully!');
        // Now render the UI with profile, settings, and permissions
    } catch (error) {
        console.error('Failed to load critical data:', error.message);
        // Show an error message to the user
    }
}

// What happens if one fails?
async function loadCriticalDataWithFailure() {
    console.log('\nDemonstrating Promise.all failure...');
    try {
        const results = await Promise.all([
            mockApiCall('userProfile', 400),
            mockApiCall('userSettings', 700, true), // This one will fail
            mockApiCall('userPermissions', 500)
        ]);
    } catch (error) {
        console.error('Promise.all rejected:', error.message);
        // Note: The 'userProfile' and 'userPermissions' calls may have completed,
        // but their results are lost because the whole operation failed.
    }
}

loadCriticalData();
// After a delay, call the failure example
setTimeout(loadCriticalDataWithFailure, 2000);


            

              
                Copy
              
            
          

            
async function loadDashboardWidgets() {
    console.log('\nUsing Promise.allSettled for independent widgets...');
    const results = await Promise.allSettled([
        mockApiCall('Weather Data', 600),
        mockApiCall('News Feed', 1200, true), // This API is down
        mockApiCall('Stock Ticker', 800)
    ]);

    console.log('All promises have settled. Processing results...');
    
    results.forEach((result, index) => {
        if (result.status === 'fulfilled') {
            console.log(`Widget ${index} loaded successfully with data:`, result.value.data);
            // Render this widget to the UI
        } else {
            console.error(`Widget ${index} failed to load:`, result.reason.message);
            // Show a specific error state for this widget
        }
    });
}

loadDashboardWidgets();

            

              
                Copy
              
            
          

            
function createTimeout(delay) {
    return new Promise((_, reject) => {
        setTimeout(() => {
            reject(new Error(`Operation timed out after ${delay}ms`));
        }, delay);
    });
}

async function fetchDataWithTimeout() {
    console.log('\nUsing Promise.race for a timeout...');
    try {
        const result = await Promise.race([
            mockApiCall('some critical data', 2000), // This will take too long
            createTimeout(1500) // This will win the race
        ]);
        console.log('Data fetched successfully:', result.data);
    } catch (error) {
        console.error(error.message);
    }
}

fetchDataWithTimeout();

            

              
                Copy
              
            
          

            
async function fetchResourceFromMirrors() {
    console.log('\nUsing Promise.any to find the fastest successful source...');
    try {
        const resource = await Promise.any([
            mockApiCall('Primary CDN', 800, true), // Fails quickly
            mockApiCall('European Mirror', 1200), // Slower but will succeed
            mockApiCall('Asian Mirror', 1100) // Also succeeds, but is slower than the European one
        ]);
        console.log('Resource fetched successfully from a mirror:', resource.data);
    } catch (error) {
        if (error instanceof AggregateError) {
            console.error('All mirrors failed to provide the resource.');
            // You can inspect individual errors:
            error.errors.forEach(err => console.log('- ' + err.message));
        }
    }
}

fetchResourceFromMirrors();

            

              
                Copy
              
            
          

            
async function processInBatches(items, batchSize, processingFn) {
    let results = [];
    for (let i = 0; i < items.length; i += batchSize) {
        const batch = items.slice(i, i + batchSize);
        console.log(`Processing batch starting at index ${i}...`);
        
        const batchPromises = batch.map(processingFn);
        const batchResults = await Promise.allSettled(batchPromises);
        results = results.concat(batchResults);
    }
    return results;
}

// Example usage:
const userIds = Array.from({ length: 20 }, (_, i) => i + 1);

// We will process 20 users in batches of 5
processInBatches(userIds, 5, id => mockApiCall(`user_${id}`, Math.random() * 1000))
    .then(allResults => {
        console.log('\nBatch processing complete.');
        const successful = allResults.filter(r => r.status === 'fulfilled').length;
        const failed = allResults.filter(r => r.status === 'rejected').length;
        console.log(`Total Results: ${allResults.length}, Successful: ${successful}, Failed: ${failed}`);
    });

            

              
                Copy