DEV Community

/[Abejide Femi Jr]\s/
/[Abejide Femi Jr]\s/

Posted on

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

Introduction

In this tutorial, I will be explaining how to fetch data asynchronously from an external API using web technologies like AJAX, Fetch API and Async/Await.

How To Fetch Data From An External API

AJAX

AJAX stands for Asynchronous Javascript and XML, it is a set of web technology to send and receive data asynchronously from a client or server, it is done behind the scene and you don't need to reload the webpage, JSON(Javascript Object Notation) have actually replaced XML(eXtensible Markup Language), most of the API's returns JSON data, AJAX can also return plain text.

Below is a description of how AJAX works

a
Request is being sent by making an AJAX call, Data in JSON format is being fetched asynchronously from the server and page content is being updated without reloading your webpage, we can fetch data from our local machine or server, public API.
I'll be demonstrating in the code below how to get data from Github API, an external API with AJAX.

    //Create the XHR Object
    let xhr = new XMLHttpRequest;
    //Call the open function, GET-type of request, url, true-asynchronous
    xhr.open('GET', 'https://api.github.com/users', true)
    //call the onload 
    xhr.onload = function() 
        {
            //check if the status is 200(means everything is okay)
            if (this.status === 200) 
                {
                    //return server response as an object with JSON.parse
                    console.log(JSON.parse(this.responseText));
        }
                }
    //call send
    xhr.send();
    //Common Types of HTTP Statuses
    // 200: OK
    // 404: ERROR
    // 403: FORBIDDEN
Enter fullscreen mode Exit fullscreen mode

Below is the data
a

Fetch API

It is the newest standard for dealing with HTTPRequest, it is part of the window object, and we can easily fetch data from an external API as well.Fetch returns Promises
I'll be demonstrating in the code below how to get data from Github API, an external API with Fetch API.

    //call the fetch function
    fetch('https://api.github.com/users')
    .then(res => res.json())//response type
    .then(data => console.log(data)); //log the data;

Enter fullscreen mode Exit fullscreen mode

Below is the data

Async/Await

It is part of the ES7 standard, it is now fully implemented in Chrome, we add async to the function and it returns a Promise.
I'll be demonstrating in the code below how to get data from Github API, an external API with Async/Await.

    async function getData() 
        {
            //await the response of the fetch call
           let response = await fetch('https://api.github.com/users');
            //proceed once the first promise is resolved.
           let data = await response.json()
            //proceed only when the second promise is resolved
            return data;
        }
//call getData function
getData()
.then(data => console.log(data));//log the data
Enter fullscreen mode Exit fullscreen mode

Below is the data
a

Note

Any of the three methods can be used to fetch data, i actually prefer to use Fetch API, and there are several methods(axios, superagent e.t.c) apart from three methods, not discussed in this context, API's are different, how request is being taken and how response is being served differs, documentation is being provided for external API's to guide you.
I hope you enjoyed the tutorial, Thanks For Reading.

Discussion (36)

Collapse
mpj profile image
Mattias Petter Johansson • Edited on

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.

Collapse
bjhaid_93 profile image
/[Abejide Femi Jr]\s/ Author

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

Collapse
ronaldoperes profile image
Ronaldo Peres

What is a Promise?

Collapse
aglamadrid19 profile image
Alvaro Lamadrid • Edited on
Collapse
itachiuchiha profile image
Itachi Uchiha • Edited on

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

blah().then()
Collapse
maccabee profile image
Maccabee

You can await Promises.

const data = await blah();

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

Collapse
itachiuchiha profile image
Itachi Uchiha

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

Collapse
pierrejoubert73 profile image
Pierre Joubert

Ah much better xD

Collapse
pierrejoubert73 profile image
Pierre Joubert

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

Collapse
itachiuchiha profile image
Itachi Uchiha

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' }

Thread Thread
pierrejoubert73 profile image
Pierre Joubert • Edited on

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"

Thread Thread
itachiuchiha profile image
Itachi Uchiha

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

Collapse
bjhaid_93 profile image
/[Abejide Femi Jr]\s/ Author

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

Collapse
eripanci profile image
Eri Pançi

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.

Collapse
bjhaid_93 profile image
/[Abejide Femi Jr]\s/ Author

Hello, can you share your code

Collapse
eripanci profile image
Eri Pançi

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.

Thread Thread
bjhaid_93 profile image
/[Abejide Femi Jr]\s/ Author • Edited on

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

Thread Thread
eripanci profile image
Eri Pançi

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

Thread Thread
bjhaid_93 profile image
/[Abejide Femi Jr]\s/ Author • Edited on

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.

Thread Thread
eripanci profile image
Eri Pançi

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.

Thread Thread
bjhaid_93 profile image
/[Abejide Femi Jr]\s/ Author

sorry for the late reply, can you check this out github.com/abejide001/Github-profi....

Collapse
filxy1 profile image
filza • Edited on

when i use fetch API I AM GETTING NOTHING ON MY LOCAL HOST

THIS IS MY CODE
var express = require("express");
var app = express();
app.listen(3000, () => {
console.log("Server running on port 3000");
});

const fetch = require('node-fetch');
fetch('URL')
.then(res => res.json())//response type
.then(data => console.log(data));

Collapse
aloksdiptim profile image
alokz diptim!

Won't Ajax jquery be easier than this ?

Collapse
bjhaid_93 profile image
/[Abejide Femi Jr]\s/ Author

with sound knowledge in vanilla JavaScript, you might not need jquery in your code, i prefer Ajax with vanilla JavaScript to Ajax with jquery.

Collapse
aloksdiptim profile image
alokz diptim!

Okay that is good

Collapse
maccabee profile image
Maccabee

jQuery is a very large library if you just want Ajax

Collapse
lewisyuburi profile image
Lew Yuburi

Can I translate this to spanish in my Medium blog? I will reference this post

Collapse
bjhaid_93 profile image
/[Abejide Femi Jr]\s/ Author

You are free to do so.

Collapse
bgadrian profile image
Adrian B.G. • Edited on

And while learning these, you may want to know they invented a new way of fetching a resource youtu.be/Wi_PhaFdjlo

Collapse
deni404 profile image
Deni Toshevski

How would you loop through the received data, if you want let's say just a certain part of it to display?

Collapse
technosmarter profile image
Techno Smarter

We can direct fetch data from the database usng Ajax and PHP
bit.ly/2CKqH6t

Collapse
onuoha_ifeanyi profile image
Ifeanyi onuoha • Edited on

Great article. It cleared me perfectly in a very brief and precise manner. Thanks

Collapse
kiquenet profile image
Kiquenet

alternatives to Promise?

let vs var ?

Collapse
anitabenites profile image
Ana María Benites Rodríguez

Nice, thanks for the information!

Collapse
db325 profile image
db325

When working with the fetch API, how would I put in my access tokens and keys with the request? I've been stuck for two days in this Twitter app.

Collapse
aditya727 profile image
ADITYA727

Sir , I have url and api_key than how can fetch data ...........