Multiple awaits vs Promise.all()

Written byPhuoc Nguyen

#Using multiple awaits

When you use multiple `await` statements, each one will pause the function's execution until the awaited promise is resolved. Here's an example to illustrate this concept:

const getData() = async () => {
    const firstData = await fetch('/api/first');
    const secondData = await fetch('/api/second');
    const thirdData = await fetch('/api/third');

    return [firstData, secondData, thirdData];
};

The function `getData()` fetches data from three different endpoints in a row, waiting for each one to finish before moving on to the next. While this ensures that the data is fetched in order, it can also slow things down. Each `await` statement pauses the function until the data is returned, which can lead to slower performance overall.

Using multiple awaits to run independent tasks is not the best choice. For example, if the first task takes a long time to complete, while the last one fails quickly, users will have to wait for all tasks to finish before seeing the error message. This is not a good user experience.

#Using Promise.all()

By using `Promise.all()`, you can run multiple asynchronous operations at the same time. Let's take a look at the example we used in the previous section, but this time we'll use the `Promise.all()` function.

const getData() = async () => {
    const [firstData, secondData, thirdData] = await Promise.all([
        fetch('/api/first'),
        fetch('/api/second'),
        fetch('/api/third'),
    ]);

    return [firstData, secondData, thirdData];
};

In this example, the `getData()` function fetches data from three different endpoints at the same time, waiting for all of them to complete before returning the data. This technique can improve performance because the function won't be paused by individual `await` statements.

With Promise.all, if any of its tasks are rejected, it will immediately reject the entire operation. This is called fail-fast behavior and distinguishes it from multiple awaits.

#Conclusion

Both approaches, using multiple `await` statements and `Promise.all()`, have their pros and cons. The choice you make will depend on your specific use case.

Using multiple `await` statements can make your code easier to read and understand, but it may not be the fastest option. On the other hand, using `Promise.all()` can lead to faster performance, but it can be more difficult to debug.

In general, it's recommended to use `Promise.all()` when you need to execute independent tasks in parallel.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.