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

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

Below is the data

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;

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

Below is the data

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.