DEV Community

loading...
Cover image for "Synchronous" fetch with async/await

"Synchronous" fetch with async/await

johnpaulada profile image John Paul Ada Updated on ・2 min read

Originally posted at Medium.

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?

const response = fetch('https://api.com/values/1');
const json = response.json();
console.log(json);

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

fetch('https://api.com/values/1')
    .then(response => response.json())
    .then(json => console.log(json));

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 awaitin our hypothetical code, we can do this:

const response = await fetch('https://api.com/values/1');
const json = await response.json();
console.log(json);

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:

const request = async () => {
    const response = await fetch('https://api.com/values/1');
    const json = await response.json();
    console.log(json);
}

request();

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:

async/await Runkit example.

Hit the heart, unicorn or hands up button below if you like this post! 💙
Thanks! 👍

Discussion (21)

pic
Editor guide
Collapse
gtnovelt profile image
gt-novelt

I find more readable :

const json = await fetch('https://api.com/values/1')
                .then(response => response.json());
console.log(json);
Enter fullscreen mode Exit fullscreen mode

Fetch returns a promise, no need to wrap this in an async function.

Collapse
ewirth profile image
Ervin Wirth

Not working...
SyntaxError: await is only valid in async functions and async generators

Collapse
totalamd profile image
totalamd

you need to wrap everything in async func

Collapse
uclaeamsavino profile image
uclaeamsavino

Yo dog I heard you like await, so I put an await inside your await:

const data = await (await fetch('https://api.com/values/1')).json();

It would be nice if fetch offered a one-step method to get straight to the JSON data.

How do you get the nice sublime font colors?

Collapse
johnpaulada profile image
John Paul Ada Author

LOL
You could create a function for that.
I just create a javascript code block in markdown for the colors. :)

Collapse
showlet profile image
Gabriel Cholette-Rioux

your request function doesn't return the json result, only logs it. The function still returns a promise in my code, is it normal behavior? should the request function be sync when called as

const res = request()

?

Collapse
johnpaulada profile image
John Paul Ada Author

ahh the function wrapping that should also be async, so it should be like:

const useRequest = async () => {
  const res = await request()
}

useRequest()

given that you return the json instead of just logging it in the request() function.

Collapse
mindyzwan profile image
Mindy Zwanziger

Exactly what I needed to know too - thanks!

Collapse
ahristoskov profile image
Alexander Hristoskov

I have the following problem, I have an express API endpoint which returns a token, although the promise .then() returns SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data like the Promise is still not resolved. Anyone else have such issues? I tried your code as well but with the same result.

Collapse
johnpaulada profile image
John Paul Ada Author

Hey! When I get this error, it's usually because the result I get isn't in JSON. Try await response.text() and check the response.

Collapse
stephendy profile image
Stephen 🇬🇧 🇺🇸 🇸🇾 🇰🇵

This is a great article, very new to this area and this is something that's been bugging me for days. I knew there had to be a better way to do what i wanted and this is it.

Plenty of examples out there going off on tangents or using jQuery etc - and also pointed me in the direction of something to read up on further.

Collapse
petko3000 profile image
petko3000

Guys, i would like to solve one issue with this async function. How to load output from that function to a variable usable in later non-async code? Like lets say i collect data from couple of APIs within async function, then i need to do some logic on top of that data with non-async code.

Collapse
venkatgadicherla profile image
venkatgadicherla

Hi
May be I am a bit naive. But this bit of code not working for me. I am trying to put this in a react component in componentDidMount to get data from asp.net controller and getting various errors. Any pre-requisites for this code to work.

Collapse
ben profile image
Ben Halpern

I've mostly stayed on the sidelines in terms of the new JavaScript features, but I'm starting to get back into it, and async await is something I look forward to playing with.

Collapse
dann1609 profile image
dann1609

if fetch end in catch this Will Block the app.

Collapse
moustachedsign profile image
Moustache Design

Yes, indeed. You can prevent it by wrapping those lines in a try / catch block

Collapse
dimitir profile image
Dmitriy Popovich

(async () => {
const todo = await Model.create(
{
//data
}
);
const todoItem = await todo.save();

})();
Collapse
mauroca80 profile image
mauroca80

great!!!!!!! thanks for all

Collapse
rolivo profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
rolivo

Well i think that javacript is a s.hit because is for default async
and it's a nightmare is synchronizing processes. Fetch api and cors are more s.hit
they do not bring anything new, it's the same as ajax but with more pain.

Collapse
ayershov777 profile image
Anthony Yershov

That's because fetch is meant to be as bare bones as possible. Ajax is there to make fetch cleaner.

Collapse
regs01 profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
regs01

await can only be used in async function. yes, it does wait for a promise, but function is still being run asynchronously. so when response is ready, the function to return this response has already ended.

so quit a pointless construction.