DEV Community

Cover image for "Synchronous" fetch with async/await

"Synchronous" fetch with async/await

John Paul Ada on July 20, 2017

Originally posted at Medium. TL;DR async/await allows us to program using asynchronous requests in a "synchronous" manner using the mo...
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 • Edited

you need to wrap everything in async func

Collapse
 
uclaeamsavino profile image
uclaeamsavino • Edited

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

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

Collapse
 
archs profile image
Archs

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 • Edited

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
 
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
 
spine001 profile image
spine001

You can pass an objetc to the function, and then take care to only change the content of the object without making a copy of it, then what is passed is the address of the object. And when you modify it with methods of the object that don't make copies, you will be modifying the object itself outside the scope of the function.
I imagine that you already solved this but since I haven't seen anybody ever give you an answer I am posting this to help others with the same problem.

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

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
 
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
 
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
 
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 • Edited

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

})();
Collapse
 
mauroca80 profile image
mauroca80

great!!!!!!! thanks for all