Difference between Promise.all() and Promise.race() -

For a refresher on the general concept of promises by yours truly click here.

As you already know, promises solve a common problem when writing asynchronous code using callbacks – how to handle nested and burdensome sequences of callback functions. Instead of using callback methods, promises can be chained using the then() which returns a new promise. We can then usually chain as many different promises as we want.

fetch("https://pokeapi.co/api/v2/pokemon?limit=20&offset=0")
  .then((pokemonResponse) => pokemonResponse.json())
  .then((pokemonList) => console.log(pokemonList))
  .catch((error) => console.log("An Error Ocurred" + error));

Above we created a sequence of promises that will be resolved one after another if everything goes as expected. If it doesn’t, well we have our reliable catch() method that will take an error callback. Any failure that might occur will be caught in the catch handler, which helps us handle the whole sequence of steps even better.

Waiting for a number of promises

Promises greatly reduce the burden of writing code that executes several asynchronous tasks, by using a Promise.all() method which takes an iterable number of promises as input and produces a single promise which will be resolved if and only if all the input promises have been resolved.

Let us see an example of that.

Promise.all([
  fetch("https://pokeapi.co/api/v2/pokemon/1"),
  fetch("https://pokeapi.co/api/v2/pokemon/2"),
  fetch("https://pokeapi.co/api/v2/pokemon/3"),
]).then((results) => {
  const bulbasaur = results[0];
  const ivysaur = results[1];
  const venusaur = results[2];

  console.log(bulbasaur);
}).catch(error => console.log("Something went wrong, ", error));

We use Promise.all() in order to resolve all provided responses. This method will resolve successfully if all passed promises resolve, and it will reject if any of the promises fail. The success callback will take an array of success values, each for one of the promises provided, in order.

This method waits for all the promises provided. We typically use Promise.all() when we have multiple related tasks that the code needs to resolve in order to work successfully. All of them of course needing to resolve before we want to continue execution. But what if we don’t want to wait but instead want the first one that resolves (or rejects). In that case, we can use the Promise.race() method.

Racing promises

Let us say we have a list of different fetch requests for different API endpoints, and we want only to retrieve the first one that gets provided. For that use case, we will utilize the Promise.race() method.

Promise.race([
  fetch("https://pokeapi.co/api/v2/pokemon/1"),
  fetch("https://pokeapi.co/api/v2/pokemon/2"),
  fetch("https://pokeapi.co/api/v2/pokemon/3"),
  fetch("https://pokeapi.co/api/v2/pokemon/4"),
  fetch("https://pokeapi.co/api/v2/pokemon/5"),
  fetch("https://pokeapi.co/api/v2/pokemon/6"),
])
  .then((firstResult) => {
    return firstResult.json();
  })
  .then((pokemon) => console.log(pokemon))
  .catch((error) => console.log("Something went wrong, ", error));

We just created a new method, that will take an array of promises as an input and that will return a new promise that will resolve or reject as soon as the first promise resolves or rejects.

We would use Promise.race() when we would like to timeout different requests or when we need a piece of code for our loader.

Final Words

These two methods can be two new weapons in your arsenal for writing async code. The question to ask yourself when you want to use one or the either is always – what return value do I want to get back? Do I want a list of all provided promises or only the first value? That can help you greatly when deciding what kind of response you really want.

Otherwise for more articles please click below, or check the blog.

Facebook Tweet Pin LinkedIn