Multiple awaits vs Promise.all()

Written byPhuoc Nguyen

Created

26 Aug, 2023

#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.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

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.

Phước Nguyễn