\
The `Promise.all()` method in Javascript is a function that accepts many promises and then does something only after they have all been settled. From all the promises you enter into it, it creates a new promise which then waits for each promise to finish, before continuing. That ultimately means you can wait for multiple things to finish before you fire something else.

\
This method is particularly useful for [UI](https://en.wikipedia.org/wiki/User_interface_design#:\~:text=User%20interface%20(UI)%20design%20or,usability%20and%20the%20user%20experience.) development - for example, if you want a loading symbol to show on the screen until multiple promises conclude, then `Promise.all()` provides an easy way to do that. Let's look at how it works.

## The Javascript Promise.all() method

`Promise.all()` accepts an iterable of promises. All that means is it can accept anything that could be iterated over - like an array. You can't put objects or single promises in it. 

\
Let's look at a simple example that utilises timeouts:

```javascript
let myPromise = () => {
    return new Promise((resolve) => {
        setTimeout(function() {
            resolve('firstPromise')
        }, 500)
    })
}

let mySecondPromise = () => {
    return new Promise((resolve) => {
        setTimeout(function() {
            resolve('secondPromise')
        }, 800)
    })
}
```

\
Here we have two timeouts, the longest of which takes 800ms. We want the console log the values of each after both are finished. 

\
The easiest way to do this is with `Promise.all()`:

```javascript
Promise.all([ myPromise(), mySecondPromise() ]).then((data) => {
    console.log(data) // Console logs [ 'firstPromise', 'secondPromise' ]
})
```

\
As you can see, `Promise.all()` is tenable, and the data returned is an array of the result from each promise. So, since we passed in `myPromise, mySecondPromise`, we get the data of each in an array, in the same order.

\
While it might be tempting to use `await` like so:

```javascript
let myPromiseFinish = await myPromise()
let mySecondPromiseFinish = await mySecondPromise()
console.log([ myPromiseFinish, mySecondPromiseFinish ])
```

\
This is actually **less efficient**. `await` causes both functions to run one after another. That means that by using `await`, the total time taken to finish both promises will be `1300ms`. 

\
`Promise.all()` lets you run both promises concurrently, meaning that the total operation can take around `800ms` - this is quite useful to know if you are looking to optimize your code.

### Expanding promise results using Promise.all()

Since `Promise.all()` will return an array of results, and also creates a new promise, we can use `await` with `Promise.all()`, and capture its output like so:

```javascript
let [ myPromiseResult, mySecondPromiseResult ] = await Promise.all([ myPromise(), mySecondPromise() ])
```

\
Now both of the results of our promises are available once `Promise.all()` finishes processing both. Pretty cool, right?

### Promise Rejection

It's important to note that if your promise fires `reject` instead of `resolve`, `Promise.all()` will immediately `reject` too. If you are unfamiliar with promise rejections, then that’s the best time to use the `reject` function instead of the `resolve` function. 

\
Below, the promise will always reject and throw an error `Uncaught firstPromise`:

```javascript
let myPromise = () => {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            reject('firstPromise')
        }, 500)
    })
}
```

\
So, if a promise in your `Promise.all()` set rejects, be sure to anticipate that `Promise.all()` will also reject.

## Conclusion

`Promise.all()` is a really useful way to simplify your code, and also speed it up in some instances - by letting you do promises concurrently. If you're new to Javascript, learning about how promises and async functions work in Javascript is tricky, so I wrote another guide on that - [you can learn more about promises here](https://fjolt.com/article/javascript-async).

\

---

Also published [here.](https://fjolt.com/article/javascript-promise-all) 

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Everything You Need to Know About Promise.all() in JavaScript

Everything You Need to Know About Promise.all() in JavaScript

Too Long; Didn't Read

@smpnjn

RELATED STORIES