JavaScript Async Await Loops Working Properly - Code Utilities

This collection provides ready-to-use JavaScript utilities to ensure async await works properly with loops. Copy these functions directly into your projects to handle common async loop scenarios efficiently.

Core Utility: Async forEach Alternative #

Replace the problematic native forEach() with this utility that properly handles async operations:

Parallel Processing Utility #

When you need maximum speed and operations are independent:

Batch Processing Utility #

Control concurrency for large datasets to avoid overwhelming servers:

// ✅ Batch Processing Utility
async function asyncBatch(array, batchSize, asyncCallback) {
    const results = [];
    
    for (let i = 0; i < array.length; i += batchSize) {
        const batch = array.slice(i, i + batchSize);
        const batchPromises = batch.map(asyncCallback);
        const batchResults = await Promise.all(batchPromises);
        results.push(...batchResults);
        
        // Optional: Add delay between batches
        if (i + batchSize < array.length) {
            await new Promise(resolve => setTimeout(resolve, 100));
        }
    }
    
    return results;
}

// Usage example
async function processBatches() {
    const urls = Array.from({length: 20}, (_, i) => 
        `https://jsonplaceholder.typicode.com/posts/${i + 1}`
    );
    
    const results = await asyncBatch(urls, 5, async (url) => {
        const response = await fetch(url);
        return response.json();
    });
    
    console.log(`Processed ${results.length} items in batches`);
}

Error-Resilient Loop Utility #

Continue processing even when individual operations fail:

Performance Comparison Utility #

Measure and compare different async loop approaches:

// ✅ Performance Benchmarking Utility
async function benchmarkAsyncLoops(data, iterations = 3) {
    const results = {};
    
    // Sequential processing
    const sequentialTimes = [];
    for (let i = 0; i < iterations; i++) {
        const start = Date.now();
        for (const item of data) {
            await new Promise(resolve => setTimeout(resolve, 10));
        }
        sequentialTimes.push(Date.now() - start);
    }
    results.sequential = Math.round(sequentialTimes.reduce((a, b) => a + b) / iterations);
    
    // Parallel processing
    const parallelTimes = [];
    for (let i = 0; i < iterations; i++) {
        const start = Date.now();
        const promises = data.map(() => new Promise(resolve => setTimeout(resolve, 10)));
        await Promise.all(promises);
        parallelTimes.push(Date.now() - start);
    }
    results.parallel = Math.round(parallelTimes.reduce((a, b) => a + b) / iterations);
    
    // Batch processing (batches of 3)
    const batchTimes = [];
    for (let i = 0; i < iterations; i++) {
        const start = Date.now();
        await asyncBatch(data, 3, () => new Promise(resolve => setTimeout(resolve, 10)));
        batchTimes.push(Date.now() - start);
    }
    results.batch = Math.round(batchTimes.reduce((a, b) => a + b) / iterations);
    
    return results;
}

// Usage
const testData = Array.from({length: 10}, (_, i) => i);
benchmarkAsyncLoops(testData).then(results => {
    console.log('Performance Results (avg ms):');
    console.log(`Sequential: ${results.sequential}ms`);
    console.log(`Parallel: ${results.parallel}ms`);
    console.log(`Batch: ${results.batch}ms`);
});

Loop Pattern Decision Helper #

Choose the right pattern based on your requirements:

// ✅ Loop Pattern Selector Utility
function selectAsyncLoopPattern(requirements) {
    const {
        preserveOrder = false,
        errorTolerance = 'fail-fast',
        concurrencyLimit = null,
        serverLimits = false
    } = requirements;
    
    if (serverLimits || concurrencyLimit) {
        return {
            pattern: 'batch',
            reason: 'Server limits or concurrency control needed',
            utility: 'asyncBatch'
        };
    }
    
    if (preserveOrder && errorTolerance === 'fail-fast') {
        return {
            pattern: 'sequential',
            reason: 'Order preservation with fail-fast error handling',
            utility: 'asyncForEach'
        };
    }
    
    if (preserveOrder && errorTolerance === 'continue') {
        return {
            pattern: 'sequential-safe',
            reason: 'Order preservation with error resilience',
            utility: 'asyncForEachSafe'
        };
    }
    
    if (!preserveOrder && errorTolerance === 'fail-fast') {
        return {
            pattern: 'parallel',
            reason: 'Maximum speed with fail-fast error handling',
            utility: 'asyncMap'
        };
    }
    
    return {
        pattern: 'parallel-settled',
        reason: 'Maximum speed with individual error handling',
        utility: 'Promise.allSettled'
    };
}

// Usage examples
console.log(selectAsyncLoopPattern({ preserveOrder: true }));
console.log(selectAsyncLoopPattern({ serverLimits: true }));
console.log(selectAsyncLoopPattern({ errorTolerance: 'continue' }));

Quick Reference Implementation Guide #

Use this decision matrix to quickly implement the right solution:

Installation and Usage #

Copy the utilities you need into your project. Each function is self-contained and requires no dependencies beyond native JavaScript features.

// Import pattern (if using modules)
// export { asyncForEach, asyncMap, asyncBatch, asyncForEachSafe };

// Direct usage pattern
const myArray = [1, 2, 3, 4, 5];

// Choose your approach:
await asyncForEach(myArray, callback);           // Sequential
await asyncMap(myArray, callback);               // Parallel
await asyncBatch(myArray, 2, callback);          // Batched
await asyncForEachSafe(myArray, callback);       // Error-safe

These utilities ensure your async await operations work properly with loops while giving you control over execution patterns, error handling, and performance characteristics.