What Is Promise.all?

👋 😄

Have you ever been in a situation, where you needed to do a large amount of async functions at once? Promise.all() is very helpful at taking a large number of actions and making it easier to manage them.

What is Promise.all()

Promise.all() is a function that takes an array of promises, executes them in parallel, and returns a single promise that resolves to an array of the results from the given iterable.

Why do we need this?

Imagine trying to run, 1000 different async functions in a single block... That would take FOREVER, and it might even crash your server.

Now instead of making all 1000 calls one at a time, we could do it in parallel with Promise.all().

But even doing that with 1000 calls could be risky. So we could take it a step further and make these calls in batches to prevent possible crashes and bugs.

Another possible scenario would be needing to make multiple queries to the database and using those queries to build a single response of information.

Sound confusing? Let us walk through some examples.

//Here we have 3 promises 
const promise1 = async () => {
  await fetch('someurl.com')
   .then(res => res.json())
   .catch(err => console.log(e))
}

const promise2 = async () => {
 try{
   const data = await api.get('someurl1.com')
   const result = await data.json()
   return sesult
  }catch(e){
  console.log(e)
 }
}

const promise3 = async () => {
 try{
   const data = await api.get('someurl2.com')
   const result = await data.json()
   return sesult
  }catch(e){
  console.log(e)
 }
}

const promise1Result = await promise1()
const promise2Result = await promise2()
await promise3()

...more code

When it comes to async functions and promises, we know that no other code will run until they resolve.

In our example, all three of our async functions will have to run and resolve, one at a time, before our "more code" section runs.

This will kill your apps efficiency and bring a bad experience for your user.

This is where Promise.all() shines.

const promise1 = async () => {
  await fetch('someurl.com')
   .then(res => res.json())
}

const promise2 = async () => {
 const data = await api.get('someurl1.com')
 const result = await data.json()
   return sesult
}

const promise3 = async () => {
 const data = await api.get('someurl2.com')
 const result = await data.json()
   return sesult
}

Promise.all([ promise1, promise2, promise3 ])
  .then(response => console.log(response)) 
  .catch(error => console.log(error))

...more code

The results of each promise will be consistent with the order you passed them to Promise.all()

While we still have to wait for all of our promises to resolve, now that we are using Promise.all() they all run at the same time. This will save us time and performance hits, something critical to apps that rely on speed. As well as saving you from potential server crashes, depending on how many of your promises are server requests.

What if one of our promises fail?

If any of the promises used in our promise.all() fail, they all fail. Causing a rejection, in our promise.all().

But what if we want the rest of our promises to resolve, and we handle the rejects later?

Let us take a look at how we would do that:

const promise1 = async () => {
//Use a Try/Catch to resolve the error for this promise 
//instead of relying on promise.all
 try{
   const data = await api.get('someurl.com')
   const result = await data.json()
   return sesult
  }catch(e){
  console.log(e)
 }
}

const promise2 = async () => {
//Use .catch to resolve the error for this promise
  await fetch('http://example.com')
  .then(response => response.json())
  .then(data => console.log(data));
  .catch(e => console.log(e))
}

Promise.all([ promise1, promise2 ])
  .then(response => console.log(response)) 
  .catch(e => console.log(e))

As you can see, as long as we catch our errors in our promises, Promise.all will resolve.

Conclusion

Promise.all() is a very powerful tool, we can use it to fetch a bunch of data for our frontend, handle heavy loads of calls on our backend, and more. I suggest every developer plays with this, as handling multiple promises has never been easier.

Thank you for reading, if you have any questions or advice on how I could improve this article, feel free to reach me on twitter @kevsmss (: