Exploring Promise.all() and Promise.allSettled(): A Guide to Concurrency in JavaScript

Introduction

Promises are a crucial aspect of asynchronous JavaScript programming since they allow us to properly handle asynchronous processes. As applications become more comprehensive, it becomes necessary to manage several Promises at the same time. Promise.all() and Promise.allSettled() come into play here. In this article, we will look at when to apply each approach, with examples to demonstrate how to apply them.

Table of Contents

· Introduction
· Table of Contents
· Promise.all()
· Promise.allSettled()
· Conclusion

Promise.all()

Promise.all() is a powerful method that lets us handle several Promises at the same time. It accepts an iterable of Promises as input and returns a new Promise when all of the Promises in the iterable have been fulfilled. If any of the Promises fail, the resulting Promise fails as well.

Consider the following scenario: we need to make two API calls and wait for both results before proceeding.

const fetchUserData = async () => {
  // API call to fetch user data
};

const fetchProductData = async () => {
  // API call to fetch product data
};

const results = await Promise.all([fetchUserData(), fetchProductData()]);
const userData = results[0];
const productData = results[1];

console.log('User data:', userData);
console.log('Product data:', productData);

In this example, the fetchUserData() and fetchProductData() methods represent two API calls. We use Promise.all() to wait for the resolution of both API calls at the same time. The API call results are stored in the results array.

Promise.allSettled()

Another method that can be beneficial in some situations is Promise.allSettled(). Promise.allSettled() waits for all Promises to settle, regardless of fulfillment or rejection, unlike Promise.all(), which short-circuits when one Promise rejects. This makes it ideal for situations where we need to process partial results or gracefully handle failures.

Consider the following scenario: We need to batch-consume messages from a message queue, such as SQS or Kafka.

const messages = [message1, message2, message3];
const results = await Promise.allSettled(messages.map(async (message) => {
    // Logic to consume a single message
}));
results.forEach((result, index) => {
  if (result.status === 'fulfilled') {
    // Process successful result
    console.log(`Message ${index} processed successfully: ${result.value}`);
  } else {
    // Handle error
    console.error(`Error processing message ${index}: ${result.reason}`);
  }
});

In the above example, We have an array of messages that we need to process asynchronously. We can process all messages in the array and handle each result individually by using Promise.allSettled(). The objects in the results array have a status property that indicates whether the Promise was fulfilled or rejected, and value or reason properties that provide the fulfillment value or rejection reason, respectively.

Conclusion

In conclusion, Promise.all() and Promise.allSettled() are useful functions for managing multiple Promises. Promise.all() is useful when we need all Promises to be fulfilled and want to handle them all at once. Promise.allSettled(), on the other hand, succeeds when we need to process partial outcomes or gracefully handle failures. We can make more intelligent decisions and develop more resilient asynchronous code if we understand the distinctions between these approaches and evaluate our individual use cases.