Exploring Promise.all() and Promise.allSettled()

In JavaScript Promise.all() and Promise.allSettled() take an array of promises then return a new promise after all the promises either fulfilled or rejected. This is particularly useful when you are making a series of asynchronous request(example fetching data from database or making post request to database).

Promise.all()

Promise.all() will resolve promises parallelly. Let’s look at the example of Promise.all(),

Promise.all([ fetchUsers(), fetchTodos() ])
   .then(res => {
     console.log(res);
     const [users, todos] = res;
   })
   .catch(err => console.log(err))

// fetching the users
function fetchUsers() {
  return fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => res.json());
}

// fetching the todos
function fetchTodos() {
  return fetch('https://jsonplaceholder.typicode.com/todos')
    .then(res => res.json());
}

If the request is fulfilled then the response will be two array (users & todos). When we run this we see two array containing users and todos.

[Array(10), Array(100)]

Promise.allSettled

Promise.allSettled() will try to resolve the array of promises return as an array of object. Each object describes the outcome of each promise. Let’s implement last example with Promise.allSettled(),

Promise.allSettled([ fetchUsers(), fetchTodos() ])
  .then(res => console.log(res))
  .catch(err => console.log(err))

// fetching the users
function fetchUsers() {
  return fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
}

// fetching the todos
function fetchTodos() {
  return fetch('https://jsonplaceholder.typicode.com/todos')
    .then(res => res.json())
}

When we run this,

[
  {status: "fulfilled", value: [...]},
  {status: "fulfilled", value: [...]}
]

We can see two promises are resolved with status fulfilled and value containing the actual users and todos.

Difference between Promise.all & Promise.allSettled

The core difference between Promise.all() and Promise.allSettled() is that, Promise.all() returns a promise when all the promises fulfilled, in that case we can get the response from inside the .then else when rejection happens we will get the error message from inside the .catch. For Promise.allSettled() if any promise were rejected it will show the reason however it will also show the response of the promises are fulfilled. Let’s look at the example.

Promise.all([ fetchUsers(), fetchTodos() ])
  .then(res => console.log(res))
  .catch(err => console.log(err))

// fetching the users
function fetchUsers() {
  // https://jsonplacehoder.typicode is not a valid api endpoint
  return fetch('https://jsonplacehoder.typicode')
    .then(res => res.json())
}

// fetching the todos
function fetchTodos() {
  return fetch('https://jsonplaceholder.typicode.com/todos')
    .then(res => res.json())
}

This will be a TypeError.

TypeError: Failed to fetch

Now let’s try with Promise.allSettled(),

Promise.allSettled([ fetchUsers(), fetchTodos() ])
    .then(res => console.log(res))
    .catch(err => console.log(err))

// fetching the users
function fetchUsers() {
  // not a valid api endpoint
  return fetch('https://jsonplacehoder.typicode')
    .then(res => res.json())
}

// fetching the todos
function fetchTodos() {
  return fetch('https://jsonplaceholder.typicode.com/todos')
    .then(res => res.json())
}

This will give us an array with status rejected and fulfilled. Rejection is for fetchUsers() and Fulfilled is for fetchTodos().

[
  {status: "rejected", reason: TypeError: Failed to fetch},
  {status: "fulfilled", value: Array(200)}
]

When to use them

You can use any of them when you make more than one promise to execute. Which one to use? It certainly depends on your criteria.