DEV Community

Beginners Guide To Fetching Data With (AJAX, Fetch API & Async/Await)

/[Abejide Femi Jr]\s/ on May 20, 2018

Introduction In this tutorial, I will be explaining how to fetch data asynchronously from an external API using web technologies like AJ...

Read full post

Mattias Petter Johansson • May 21 '18 • Edited

Note that response.json() returns a PROMISE. This is a common misconception. This article is a wee bit misleading in the async / await example, the data variable will be a promise but the example sort of makes it seem like response.json() is sync by not using await in front of the call.

/[Abejide Femi Jr]\s/ • May 21 '18

Thank you for spotting that out Mattias, it was a mistake, and the code as been edited.
Cheers.

Ronaldo Peres • Jan 1 '19

What is a Promise?

Alvaro Lamadrid • Apr 23 '19 • Edited

Take a look at MDN

developer.mozilla.org/en-US/docs/W...

Itachi Uchiha • May 21 '18 • Edited

Is there a way extract data from promise? For example, I don't want to use like this:

blah().then()

Maccabee • May 24 '18

You can await Promises.

const data = await blah();

That's how async/await compile with babel, into Promises.

Itachi Uchiha • May 24 '18

Thanks a lot. It worked :) Why I didn't try that. I think I was confused.

Pierre Joubert • May 24 '18

Ah much better xD

Pierre Joubert • May 24 '18

Do you not like the syntax? Or do you not want to deal with promises?

Itachi Uchiha • May 24 '18

I just wonder about assign result to a variable. I don't wan't to use then all time. For example:

const myResults = fetch('site.com')
   .then(resp => resp.json())
   .then(obj => obj)

console.log(myResults)
// { name: 'John', surname: 'Doe' }

Pierre Joubert • May 24 '18 • Edited

I just did this and it seemed to work:

var foo = null;
fetch('https://jsonplaceholder.typicode.com/posts/1')
   .then(resp => resp.json())
   .then(obj => foo = obj)

Then foo is accessible object like: foo.title
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit"

Itachi Uchiha • May 24 '18

Thanks a lot. That's exactly what I want.

/[Abejide Femi Jr]\s/ • May 21 '18

don't know of any, apart from .then(), and .catch() -> for errors.

Eri Pançi • May 25 '18

Great article. It inspired me to experiment with API's since I'm in a period of learning Javascript. But doing a small project I got a problem, and since I didn't find an article online, I thought to ask here, hope I'll be clear:
Is there a possibility to make the async function and getData in different functions or objects?

Because in your example both these are immediately after one another. But after some time my code gets messy, so I wanted to make the function and the call in different objects.

Thank you.

/[Abejide Femi Jr]\s/ • May 25 '18

Hello, can you share your code

Eri Pançi • May 25 '18

since I'm working on Glitch, here is the full project: glitch.com/edit/#!/titanium-freeze

As you can see, inside the function getMovies it's async function and getData(). Can I make these two not inside one function but instead in two? One can get the data, the other can show it?

Thank you.

/[Abejide Femi Jr]\s/ • May 25 '18 • Edited

Can't access that URL, can you paste your code here please, or possibly push to GitHub and send the URL

Eri Pançi • May 25 '18

Strange. Anyway here it is in Github: github.com/erip2/MovieApp/

/[Abejide Femi Jr]\s/ • May 26 '18 • Edited

firstly, what are the datas you are trying to get from the API, i can also see you are trying to persist to sessionstorage, es6 classes could make the code look cleaner a bit tho, have a separate class for your ui, another class for you Session or local storage, then another class for the Movie.

Eri Pançi • May 26 '18

The data I'm getting from API is an array of movie titles the user search. Then when user clicks for details, I save the movie ID in sessionStorage to open a new window with that movie details.

That was exactly why I asked, to do these in different places in my code. Could I do these in different objects or should I read about JS classes since I don't know them very well to use it?

Thanks again.