await Promise.all vs async/await: Syntax, Use Cases, Pros & Cons

await Promise.all vs async/await: Syntax, Use Cases, Pros & Cons
Before we dive in, why not take a quick peek at my portfolio: https://priyalraj.com, & while you’re at it, check out my SaaS venture: https://shavelinks.com, it’s where innovation meets simplicity.

I used to rely on async/await for every asynchronous task in JavaScript. It felt clean, readable, and modern. It was a huge improvement over .then() chaining.

But then…. my codebase grew. 😨

Performance issues started popping up 🚨. Some functions that should’ve been lightning-fast ⚡ were mysteriously slow. That’s when I realised — my overuse of async/await was the problem.

Let me explain what I have learned — and why I shifted to Promise.all first.

🤔 The Problem With async/await

Let’s say you’re writing your code like this:

javascript
const user = await fetchUser();
const posts = await fetchPosts(user.id);
const comments = await fetchComments(posts[0].id);

Seems fine, right 👌? You sure 🤔?

But what if fetchUser, fetchPosts, and fetchComments are independent? Or maybe you're fetching multiple users, or posts, or products — none of which depend on each other?

Using await The method, one after the other, means each task waits for the previous one to finish.

You’re not writing async code, you’re writing sequential code. 😨

🔥 The Day I Discovered Promise.all

I refactored a part of my app that fetched data from three different APIs. Originally, I had:

javascript
const users = await fetchUsers();
const posts = await fetchPosts();
const comments = await fetchComments();

Let’s say if each execution took 1 second, which means the total time would be 3 seconds.

Then I changed my code to this:

javascript
const [users, posts, comments] = await Promise.all([
 fetchUsers(),
 fetchPosts(),
 fetchComments()
]);

Now what will happen is that, at the same time, all 3 executions are made, which makes everything load in just 1 second. Same result, but 3x faster.

🚀 Why I Switched to Promise.all

✅ Faster Performance

Running things in parallel cuts my load times drastically. This was a game-changer, especially for frontend apps and serverless functions.

✅ Cleaner Logic for Parallel Tasks

Instead of stacking await calls or nesting functions, Promise.all let me group related async operations.

✅ Fail-Fast Behaviour

If any promise fails, it Promise.all throws. That made debugging and error tracking easier in many cases.

🧠 When I Still Use async/await

Not everything can be parallelised. Some tasks depend on others:

const user = await fetchUser();const orders = await fetchOrders(user.id);

In these cases, it async/await still makes perfect sense. But now, I use it consciously, not by default.

🧾 TL;DR — Why I Switched

So yeah, I didn’t stop using async/await completely — I just stopped misusing it.

If your code is getting slower than it should be, check your await. You might be waiting when you don’t have to.

If you enjoyed this article, please make sure to Like, Comment and follow me on Twitter.
Made with ❤️ by Priyal Raj