Implementing Parallel Execution and Synchronous Waiting for Multiple Asynchronous Operations Using Promise.all

The Need for Parallel Execution and Synchronous Waiting in Asynchronous Programming

In modern JavaScript development, asynchronous programming has become a core pattern for handling I/O operations, network requests, and user interactions. A common scenario involves calling asynchronous functions multiple times within a loop and then needing to wait for all these asynchronous operations to complete before executing subsequent synchronous or asynchronous tasks. This requirement is particularly prevalent in batch data processing, parallel resource loading, and complex workflow coordination.

Core Mechanism of Promise.all

The Promise.all method introduced in ES6 is the standard solution for this problem. It accepts an iterable object (typically an array) containing multiple Promise instances and returns a new Promise. The state of this new Promise is determined collectively by all input Promises: it resolves only when all input Promises are successfully fulfilled, with their resolution values arranged in an array in the original order as its own resolution value; if any input Promise is rejected, it immediately rejects, using the reason from the first rejected Promise as its own rejection reason.

From a technical implementation perspective, the internal mechanism of Promise.all can be understood as:

Promise.all = function(promises) {
    return new Promise((resolve, reject) => {
        let results = [];
        let completed = 0;
        
        promises.forEach((promise, index) => {
            Promise.resolve(promise)
                .then(value => {
                    results[index] = value;
                    completed++;
                    if (completed === promises.length) {
                        resolve(results);
                    }
                })
                .catch(reject);
        });
        
        if (promises.length === 0) {
            resolve([]);
        }
    });
};

Practical Application Examples and Code Refactoring

Based on the scenario provided in the Q&A, we can refactor the doSomeAsyncStuff function to return a Promise:

function doSomeAsyncStuff() {
    return new Promise((resolve, reject) => {
        const editor = generateCKEditor();
        editor.on('instanceReady', (evt) => {
            try {
                doSomeStuff();
                resolve(true);
            } catch (error) {
                reject(error);
            }
        });
        
        editor.on('error', (error) => {
            reject(error);
        });
    });
}

Then use Promise.all to coordinate multiple asynchronous calls:

async function executeAsyncWorkflow() {
    const promises = [];
    
    for (let i = 0; i < 5; i++) {
        promises.push(doSomeAsyncStuff());
    }
    
    try {
        const results = await Promise.all(promises);
        
        for (let i = 0; i < 5; i++) {
            doSomeStuffOnlyWhenTheAsyncStuffIsFinish();
        }
        
        console.log('All asynchronous operations completed, results:', results);
    } catch (error) {
        console.error('Asynchronous operation failed:', error);
        // Error handling logic
    }
}

Error Handling and Edge Cases

When using Promise.all, several important considerations must be noted:

1. Fail-fast mechanism: If any Promise is rejected, Promise.all immediately rejects without waiting for other Promises to complete. This is advantageous in some scenarios (quick error detection) but may require different strategies in others.
2. Empty array handling: When an empty array is passed, Promise.all immediately resolves to an empty array.
3. Non-Promise values: If the array contains non-Promise values, they are wrapped by Promise.resolve and appear as-is in the result array.
4. Memory considerations: When handling a large number of Promises, memory usage must be considered, as all Promise resolution values are kept in memory until all are completed.

Alternative Solutions and Advanced Usage

In addition to Promise.all, ES6 provides other related Promise combination methods:

• Promise.race: Returns the result of the first Promise that resolves or rejects.
• Promise.allSettled (ES2020): Waits for all Promises to complete (whether resolved or rejected) and returns the result status of each Promise.
• Promise.any (ES2021): Returns the first resolved Promise, rejecting only if all Promises are rejected.

For scenarios requiring finer control, manual Promise management can be considered:

function executeWithCustomControl() {
    const promises = [];
    const errors = [];
    
    for (let i = 0; i < 5; i++) {
        const promise = doSomeAsyncStuff()
            .catch(error => {
                errors.push({ index: i, error });
                return null; // Continue executing other Promises
            });
        promises.push(promise);
    }
    
    return Promise.all(promises)
        .then(results => {
            return {
                successes: results.filter(r => r !== null),
                errors: errors
            };
        });
}

Performance Optimization and Practical Recommendations

In real-world projects, when using Promise.all, attention should be paid to:

1. Concurrency control: When the number of asynchronous operations is large, concurrency limits may be necessary to avoid resource exhaustion.
2. Timeout handling: Add timeout mechanisms to each Promise to prevent indefinite hanging.
3. Progress tracking: For long-running operations, provide progress feedback.
4. Cancellation mechanism: In some scenarios, it may be necessary to cancel Promises that have not yet completed.

Here is an example implementation with concurrency control:

async function executeWithConcurrencyLimit(tasks, limit) {
    const results = [];
    const executing = [];
    
    for (const task of tasks) {
        const promise = task().then(result => {
            results.push(result);
            executing.splice(executing.indexOf(promise), 1);
            return result;
        });
        
        executing.push(promise);
        
        if (executing.length >= limit) {
            await Promise.race(executing);
        }
    }
    
    await Promise.all(executing);
    return results;
}

Conclusion

Promise.all is a powerful tool in JavaScript asynchronous programming for handling multiple parallel operations. By combining multiple Promises into one, it simplifies the control logic of asynchronous workflows, making code clearer and more maintainable. However, developers must fully understand its fail-fast characteristics, error handling mechanisms, and performance implications to use it correctly in practical projects. Combined with async/await syntax, it can further improve code readability and maintainability, building robust asynchronous applications.