Javascript Promise.all() - Everything you need to know
Tags: javascript, webdev, typescript
Published: 2023-02-04 23:02:58

The `Promise.all()` method in Javascript is a function which 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 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 which 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 thennable, 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 optimise 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, its when you 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).