Async/await is awesome, but don’t abandon Promises

What’s a JavaScript Promise? It’s when code vows to work every time.

Suhan Wijaya
Nov 15 · 3 min read
Image for post
Image for post
Shoutout to Cassidy Williams 😀

Let’s create a button that will:

  • perform an expensive synchronous operation,

Here is the markup.

Here are the functions. Let’s also measure the duration of each operation with the Performance API, which visualizes when and how long each function executes on the Chrome DevTools Performance Timeline. (Thanks to JSONPlaceholder for the dummy endpoints.)

You’re still here? Good, here comes the interesting part: writing the onclick handler for the button. Since all the cool kids are doing it, let’s use async / await.

async function handleClick() {
someSyncOperation(); // Expensive sync operation
const postJson = await fetchPost(); // AJAX request #1 const commentsJson = await fetchComments(); // AJAX request #2 appendPostDOM(postJson);
appendCommentsDOM(commentsJson);
}

Here is the Performance Timeline after clicking the button.

Image for post
Image for post

Let’s take a closer look.

Image for post
Image for post

Makes sense, plenty of articles out there about how async / await turns asynchronous code into blocking code. FYI, each bar is about 2 seconds when throttling the network to “Slow 3G”.

So a total execution time of 6 seconds.

OK. The fetchPost and fetchComments can be executed in parallel, so let’s use the await Promise.all combo.

async function handleClick() {
someSyncOperation();
const [ postJson, commentsJson ] = await Promise.all([
fetchPost(),
fetchComments()
]);
appendPostDOM(postJson);
appendCommentsDOM(commentsJson);
}
Image for post
Image for post

The total execution time is now 4 seconds since fetchPost and fetchComments execute in parallel.

OK. Since someSyncOperation is not dependent on the AJAX requests, let’s see if moving it to the last line in the function speeds things up.

async function handleClick() {
const [ postJson, commentsJson ] = await Promise.all([
fetchPost(),
fetchComments()
]);
appendPostDOM(postJson);
appendCommentsDOM(commentsJson);
someSyncOperation();
}
Image for post
Image for post

Nope, the total execution time is still 4 seconds.

OK. It’s time to go “full Promise”.

function handleClick() {
Promise.all([
fetchPost(),
fetchComments()
]).then(([ postJson, commentsJson ]) => {
appendPostDOM(postJson);
appendCommentsDOM(commentsJson)
});
someSyncOperation();
}
Image for post
Image for post

Going “full Promise” cuts total execution time to 2 seconds.

The reason why this works deserves its own article, but here is an awesome explainer.

Today I learned.

Image for post
Image for post
Source: Programmer Humor

Bonus

For the die-hard async / await fans out there, I learned (literally on the day of writing this story) that the following snippet actually does the same thing. Credit to this article by Moon.

async function handleClick() {
const postPromise = fetchPost();
const commentsPromise = fetchComments();

someSyncOperation();
const postJson = await postPromise;
const commentsJson = await commentsPromise;
appendPostDOM(postJson);
appendCommentsDOM(commentsJson);
}

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

📫 Hit me up on LinkedIn or email!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Suhan Wijaya

Written by

Right-brained techie passionate about coding, product, UX, and fun adventures with my family. Let’s connect on linkedin.com/in/suhanwijaya

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Suhan Wijaya

Written by

Right-brained techie passionate about coding, product, UX, and fun adventures with my family. Let’s connect on linkedin.com/in/suhanwijaya

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store