Synchronous fetch with async/await

Say goodbye to unintuitive processing of asynchronous requests.

John Paul Ada
Jul 20, 2017 · 2 min read

TL;DR

async/await allows us to program using asynchronous requests in a synchronous manner using the modern versions of Javascript.

A hypothetical introduction

As web developers, we make requests to APIs a lot — not only to our own APIs but to others’, too. As we all know, they can be a real pain in the ass.

What if we wanted to make a request to a hypothetical API https://api.com ?

What if I told you, you can make requests like this in Javascript?

Normally, this would be impossible, and normally you’d do something like this:

That is less readable than the former example.

Although, if you try the former example, it wouldn’t work. Why, you ask? Well folks, we’re missing the magic words!

await

await allows us to wait for the response of an asynchronous request.

To use await in our hypothetical code, we can do this:

Let’s break this down.

In the first line, we make a GET request to https://api.com/values/1. Instead of continuing to the next line, we wait for the request to finish, hence await. When it finishes, it passes the resolved value to the response variable.

In the second line, we get the JSON version of the response. Again, we use await so we can wait for it to complete (or fail) and then pass the result to the json variable.

Finally, in the last line, we log the value of the json variable to the console.

This saves us from writing less-than-adequately-readable code allows us to write cleaner code.

This is a more intuitive way of working with requests.

To help you understand it more, here’s another way of looking at this:

await allows us to wait for a Promise to resolve to a value.

await will return the value only after the Promise is resolved.

Sorry for being redundant but this is so you’d understand. 😄 😅

async

But wait, there’s more! Not really, but there’s something I haven’t told you yet. You know that code we rewrote with await? It won’t work yet.

WHAT!? Ikr.

To make it work, you need to wrap it inside an async function!

This is how you do it:

You just add the async keyword before the function declaration and run it! EZ!

But don’t just take it from me! Try it out here! Just hit the Run button:

Promise-based request and async/await-based requests.

Also posted in The Practical Dev.

If you like this post, subscribe! 😆

And hit the heart below! 💙

Thanks! 👍

Programmers — Developers

The official publication of the Programmers,Developers CS/IT interest group.

)

John Paul Ada

Written by

Psychology graduate turned software engineer. Tech Evangelist. Data Science Padawan.

Programmers — Developers

The official publication of the Programmers,Developers CS/IT interest group.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade