Javascript Promise.all vs Promise.race
Promises Introduction
Imagine you are a famous writer and your fans are waiting to read your latest book. To get some relief, you promise to send them a copy when publishing is done. They fill out a form for their delivery address so the copy will be shipped to them. If anything goes wrong they will still be notified either way. This is a real-life analogy of what a promise does.
Promises are used to handle asynchronous operations in Javascript. When a promise is created, the producing code runs which will eventually produce the result. In Javascript, to better avoid passing callback functions into a function, that leads to code that is hard to manage and read, promises can be used.
Promise Syntax and Properties
A Javascript promise object can be fulfilled, rejected, or pending. If it is fulfilled, the result is a value, when it is rejected a result is an error object, when it is pending, the result is undefined.
Promise can be created using Promise constructor and takes one argument, a callback function with two arguments: resolve and reject. When the callback function executes, it calls the resolve if everything went well or rejects if the desired operation was not achieved.
var promise = new Promise((myResolve, myReject) => {
// Code that takes some time
myResolve(); // call this when success
myReject(); // call this when error
});
// Code that waits the fulfillment of Promise
myPromise.then(
function(value) // if successful
function(error) // if error
);Promise.all vs Promise.race
The Promise object in Javascript offers built-in methods, such as Promise.all and Promise.race.
Promise.all accepts an iterable of promises as input and returns a single Promise of the results of the input promises after attempting to fulfill all of them. If one of those input promises get rejected it will exit. Imagine visiting your blog page, several requirements must be met like view your content, your saved blogs and interacting with the navigator bar. If any of those things are not properly displayed, you will be redirected elsewhere. Since all these operations are vital for the user to interact with the site, Promise.all can be used, and in this case, it will be rejected when one of the functions fails.
const promise1 = Promise.resolve(3);
const promise2 = 22;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
// expected output: Array [3, 22, "foo"]
Promise.race accepts an iterable object such as an array of promises and a return value of a pending promise. Just like the name, those promise will be racing against each other. The method will return the first settled promise that is resolved or rejected and it will exit after that. In the example below, promise2 executes faster so it will be resolved first.
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'two');
});Promise.race([promise1, promise2]).then((value) => {
console.log(value);
});
// expected output: "two"
Promise.all can’t handle partial failures, if one of the promises is rejected, the entire process exists with the failure callback. Promise.race does not wait for all promises to be resolved before returning a resolved promise. Choosing one over the other depends on what we need to accomplish.
Resources:
