<!DOCTYPE html>

Promise.allSettled() vs Promise.all() in JavaScript

<br>
body {<br>
font-family: sans-serif;<br>
line-height: 1.6;<br>
margin: 0;<br>
padding: 20px;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> h1, h2, h3 {
margin-bottom: 1rem;
}

code {
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 3px;
    font-family: monospace;
}

pre {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 3px;
    overflow-x: auto;
}

img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
}

</code></pre></div>
<p>

Promise.allSettled() vs Promise.all() in JavaScript

JavaScript promises have revolutionized asynchronous programming, making code more readable and manageable. Two powerful tools in the promise arsenal are

Promise.all()

and

Promise.allSettled()

. Understanding their differences and use cases is crucial for writing efficient and robust JavaScript code.

Introduction to Promises in JavaScript

Promises represent the eventual completion (or failure) of an asynchronous operation. They offer a cleaner alternative to callbacks, allowing for more organized error handling and code flow.

A promise can be in one of three states:

Pending:

The initial state, where the asynchronous operation is still in progress.
Fulfilled:

The operation has successfully completed, and the promise holds the resulting value.
Rejected:

The operation encountered an error, and the promise holds the error object.

Here's a basic example of a promise:




const promise = new Promise((resolve, reject) => {


    setTimeout(() => {


        resolve('Success!');


    }, 2000);


});


promise.then(value => console.log(value)); // Output: Success!

Promise.all()

Promise.all()

is a method that takes an array of promises as input and returns a single promise. This promise will resolve only when all the input promises have resolved, and it will reject if any of the input promises rejects.

Here's how it works:




const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'Promise 1'));


const promise2 = new Promise(resolve => setTimeout(resolve, 2000, 'Promise 2'));


const promise3 = new Promise(resolve => setTimeout(resolve, 3000, 'Promise 3'));


Promise.all([promise1, promise2, promise3])


  .then(values => console.log(values)) // Output: ['Promise 1', 'Promise 2', 'Promise 3']


  .catch(error => console.error(error));

In this example,

Promise.all()

will wait until all three promises have completed before resolving with an array containing the resolved values of each promise. If any promise rejects,

Promise.all()

will reject immediately, and the

.catch()

block will be executed.

Promise.allSettled()

Promise.allSettled()

, introduced in ES2020, is similar to

Promise.all()

, but it handles promise resolution and rejection differently. It will always resolve, regardless of whether the input promises are fulfilled or rejected. The result is an array of objects, each containing the outcome of the individual promise:

status: 'fulfilled' - for successful promises, with a value property.
status: 'rejected' - for rejected promises, with a reason property.




const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'Promise 1'));


const promise2 = new Promise((resolve, reject) => setTimeout(reject, 2000, 'Promise 2 Error'));


const promise3 = new Promise(resolve => setTimeout(resolve, 3000, 'Promise 3'));


Promise.allSettled([promise1, promise2, promise3])


  .then(results => {


    console.log(results);


    // Output:


    // [


    //   { status: 'fulfilled', value: 'Promise 1' },


    //   { status: 'rejected', reason: 'Promise 2 Error' },


    //   { status: 'fulfilled', value: 'Promise 3' }


    // ]


  });

In this example, even though

promise2

rejects,

Promise.allSettled()

still resolves, providing information about the rejection.

Key Differences: Promise.all() vs. Promise.allSettled()

The key difference lies in how they handle rejection:

Feature	Promise.all()	Promise.allSettled()
Resolution	Resolves when all input promises resolve.	Always resolves, even if some input promises reject.
Rejection	Rejects immediately if any input promise rejects.	Provides information about both fulfilled and rejected promises in the result array.
Result	An array containing the resolved values of all input promises.	An array of objects, each describing the status and value/reason of each input promise.

Use Cases and Scenarios

Choosing between

Promise.all()

and

Promise.allSettled()

depends on your specific needs:

Promise.all():

Sequential operations:

When the success of subsequent operations depends on the successful completion of prior operations. For instance, fetching data from a server and then processing that data.
Early rejection:

When you need to handle an error as soon as it occurs, stopping further execution of other promises.
Data aggregation:

When you need to collect and combine the results of multiple asynchronous operations, assuming all of them will succeed.

Promise.allSettled():

Robust error handling:

When you want to handle failures gracefully and continue processing despite individual rejections.
Parallel execution:

When you want to execute multiple asynchronous operations independently and gather their results, regardless of whether they succeed or fail.
Asynchronous validation:

When you need to validate multiple conditions asynchronously and continue processing even if some validations fail.

Performance Considerations and Best Practices

Concurrency:

Both Promise.all() and Promise.allSettled() execute promises concurrently. They don't block the main thread, making your code more responsive.
Resource Management:

Be mindful of resource usage. If you're dealing with a large number of promises, it's important to consider the potential impact on resources like network bandwidth and memory. Consider batching requests or limiting concurrent operations.
Error Handling:

Use try...catch blocks within your promises to handle potential errors gracefully. This helps prevent unexpected program termination.
Code Readability:

Use descriptive variable names and comments to make your code easier to understand.

Conclusion

Both

Promise.all()

and

Promise.allSettled()

are valuable tools for working with asynchronous operations in JavaScript.

Promise.all()

is suitable for scenarios where you need all promises to succeed for the overall operation to succeed, while

Promise.allSettled()

is a more robust option for handling asynchronous operations with potential failures. Choose the method that aligns with your specific requirements for error handling and execution behavior.

By understanding the differences between

Promise.all()

and

Promise.allSettled()

, you can write more efficient, resilient, and readable JavaScript code.

🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭