DEV Community

Anjan Karmakar
Anjan Karmakar

Posted on

Mastering JavaScript PromisesđŸ”¥| all, allSettled, race, any

Image description

JavaScript Promise APIs revolutionize how we manage asynchronous operations in JavaScript, offering a structured and efficient approach. In this article, we will delve into four crucial Promise APIs: Promise.all, Promise.allSettled, Promise.race, and Promise.any.

Promise.all: Managing Concurrent Operations

Promise.all is your go-to choice when you need to perform multiple parallel API calls simultaneously, such as fetching data for 10 different users using 10 unique IDs. This method takes an array of promises as input and initiates multiple API calls concurrently.

If you provide it with promises P1, P2, and P3, it will make these three parallel API calls and collect the results in an array. It waits for all three to complete, taking, for example, 3 seconds, and then returns the results.

Handling Failures with Promise.all

Should any of the promises in the array get rejected, Promise.all responds by throwing an error, matching the error type and message of the first rejected promise. Even if the others are pending, it quickly reports the error, illustrating how it operates.

Remember that promises are immutable; they will either resolve or reject but cannot be canceled. The promise chain does not wait for all promises to succeed; if any fail, the entire collection fails. So, all promises will either succeed or fail, with an error thrown after 1 second in case of failure.

If two seconds promises are rejected, the first rejection takes precedence, and the second one immediately returns the error. If you only need results from successful promises, Promise.all is the way to go.

Promise.allSettled: Comprehensive Promise Handling

When all promises fulfill, the output remains the same as when all promises succeed. However, if any promise gets rejected, the output changes. For instance, if there are three promises, one for success, one for error, and one for success again, any failure results in an immediate response. But if all three fail, it waits for all three and responds accordingly.

If you need the results from all API calls to display a webpage, choose Promise.all. If you want to process results even if some promises fail, go for Promise.allSettled.

Promise.race: Optimized Execution

Promise.race, the third API, returns a value as soon as the first promise resolves, allowing for optimized execution. If the first promise succeeds, it immediately returns the value. If the second promise fails, it returns the error of the first settled promise after 1 second. If P3 fails after 2 seconds, it throws an error without waiting for the others to finish.

Managing Promise Resolution with Promise.any

Promise.any, the last API, waits for the first successful promise before returning its result. If the first promise gets rejected, it doesn't respond until 1 second has passed. If one of the promises succeeds, it returns that result. If all API calls fail, it aggregates all the errors into an array. However, if all fail, it returns an aggregate error after 1 second.

Now that you understand these cases, let's move on to the code. I'll show you how to write and use these promises effectively.

Summary of Promise APIs

To recap:

  • Promise.all takes an array of promises and returns an array of results if they all succeed, failing fast if any of them fail.
  • Promise.race returns a result as soon as the first promise settles.
  • Promise.any waits for the first successful promise to return its result, ignoring failures unless all promises fail.
  • Promise.allSettled handles a mix of fulfilled and rejected promises gracefully.

Interview Questions + Clarifying Terminology: Settle, Resolve, Reject, Fulfilled

In interviews, remember that the first settled promise, whether successful or not, wins the race. Understanding the nuances of terminology, like resolved or rejected and fulfilled or rejected, is essential.

Recognize that settling can be either a failure or a success, and a promise is generally said to be fulfilled or rejected. By grasping these nuances, you'll be better prepared for interviews and deepen your understanding of JavaScript Promise APIs.

Top comments (0)