Speed up your code with Promise.all

Read Time:3 Minute, 29 Second

So one of the things I see commented on all the time in Javascript code reviews.

Say you have some code as such…

Enter fullscreen mode Exit fullscreen mode

Do we need to each of these one at a time? Cant we fork this and call them all together?

What being pointed out here is that we have to wait on each one of these Promises to return before the next one can start.

One of the most amazing things about working with Javascript is its concurrency. Meaning it can run your code in parallel instead of waiting for each Promise to finish before moving starting the next. Commonly referred to as “forking”.

Using Promise.all vs await each

Since this ability is so powerful, lets make sure we are using it. Let’s take a look at the example above and see how we can make that run in parallel.

Enter fullscreen mode Exit fullscreen mode

Ok, here is some code that we can test this idea with. I have a function that returns a Promise that takes 1sec to resolve.

Enter fullscreen mode Exit fullscreen mode

and a function that times how long a function passed to it takes to run.

Enter fullscreen mode Exit fullscreen mode

These are not important, I just wanted to explain what they were. The main thing that we are talking about here is the difference in speed with the two approaches we are timing here.

Ok lets run this code and see what happens.

Enter fullscreen mode Exit fullscreen mode

Whoah… that’s almost 3 times as fast for the parallel one. Makes sense, as there are three calls and each one takes a second. You can see how this would greatly effect your performance if you had many Promises to wait on.

Say for example we had 6 calls instead of 3. What would the timing on that look like?

Enter fullscreen mode Exit fullscreen mode

You guessed it, twice as much on the difference.

Real world example

Say for example you have a front end app that makes a few API requests before it’s ready to render and become interactive. This could make a HUGE difference to your users.

Capturing the responses

One of the common excuses I have seen for awaiting each Promise is that,

But I need to save each response from each Promise

Enter fullscreen mode Exit fullscreen mode

You can still do that with Promise.all. Promise.all returns the results in an Array in the order that the Promises were invoked, not in the order that they resolve. This is a common misconception.

Ok lets test this idea.

Enter fullscreen mode Exit fullscreen mode

Ok the main difference here is that I am giving each Promise a random duration before it returns, between 1/2 and 1 second. That way I can show that they come back in the order invoked, not the order resolved.

Enter fullscreen mode Exit fullscreen mode

Notice that even though I randomized how long each Promise will take to resolve, the results array is in the order that I called them in. Fantastic.

Example where this won’t work

There are some cases where you cannot call all your promises at the same time. Take for example API calls like I mentioned above. Say you need part of the result from one, before you can call the next.

For example say you are using REST routes that are nested…

Enter fullscreen mode Exit fullscreen mode

Well, you cant call all these together, but you may be able to still group some. Just do the best you can 🙂

Enter fullscreen mode Exit fullscreen mode

Promise.all vs Promise.allSettled

One very important thing to note, If ANY of the promises reject. Promise.all will reject at the first failure. Think of it as fail fast.

If you need to handle each rejection, and need a response for every Promise no matter what happens, use Promise.allSettled instead of Promise.all

Source: https://dev.to/dperrymorrow/speed-up-your-code-with-promiseall-3d4i

WP Ad Inserter plugin for WordPress