In this post, I am going to share all possible ways of making an API call in javascript. In javascript, it was really important to know how to make HTTP requests and retrieve the dynamic data from the server/ database. Javascript provides some built-in browser objects and some external open source libraries to interact with the APIs.

Some are the possible ways to make an API call in Javascript:

1)XMLHttpRequest

2)Fetch 

3)Axios

4)jQuery

So let's begin...

1)XMLHttpRequest

Before ES 6 comes out, the only way to make an HTTP request in Javascript was XMLHttpRequest.It is a built-in browser object that allows us to make an HTTP request in Javascript.

let request=new XMLHttpRequest();
request.open('GET',"https://jsonplaceholder.typicode.com/users");
request.send();
request.onload=()=>{
  console.log(request);
  if(request.status===200){
    console.log(JSON.parse(request.response));
  }else{
    console.log(`error${request.status} ${request.statusText`)
  }
}
By default, we receive the response's data from the API in the string format but we need to convert the data into JSON format. In order to do that we have to use JSON. parse method which converts string format data to JSON format.

XMLHttpRequest was deprecated in ES 6 by the introduction of fetch API in Javascript. But we still use XMLRequest because it works good with old browsers and if we don't want polyfills.

2)Fetch

Fetch allows you to make an HTTP request in a similar manner as XMLHttpRequest but with a straightforward interface by using promises. The fetch API is not supported by old browsers(can be polyfilled) but is very well supported by modern browsers. We can make API call by using fetch in two ways such as 

Method 1:


fetch('https://jsonplaceholder.typicode.com/users')
.then(response=>{
return response.json();
})
.then(users=>{
console.log(users);
})

Method 2:Using Async and Await


async function getUsers(){
let response=await fetch ('https://jsonplaceholder.typicode.com/users');
let data =await response.json()
return data;
}
getUsers().then(data=>console.log(data));
The fetch API is very powerful.We can easily send AJAX requests using the browser fetch API. 

3) AXIOS

Axios is an open-source library for making an HTTP requests and provides many great features, and it works both in browser and Node.js. It is a promised-based HTTP client that can be used in plain Javascript and advanced frameworks like React.js,Vue.js and Angular.It supports all modern browsers, including support for IE 8 and higher.

How to install Axios:

npm install axios
     or
 yarn add axios    
And then include Axios link in HTML file wrapped with a script tag

link: './node_modules/axios/dist/axios.min.js'
The simple and easy way to include Axois is by using Axios external CDN

CDN-link:"https://unpkg.com/axios/dist/axios.min.js"
Sample of full HTML file like this

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fetching by Axios</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get("https://jsonplaceholder.typicode.com/users')
.then(response=>{
console.log(response.data);
})
.catch(error=>console.error(error));
</script>
</head>
<body>
</body>
</html>
  
Advantages of using Axios:
  • -Axios performs automatic transformations and returns the data in JSON format.
  • -Better for error handling
  • -Axios has a wide range of supported web browsers;
  • 4) jQuery

    jQuery has many methods to handle asynchronous HTTP requests. In order to use jQuery, we need to include the source file of jQuery, and $.ajax() method is used to make the HTTP request.

    $.ajax method:

    
     <!DOCTYPE html>
    <htaml lang="eng">
    <head>
    <title>Ajax  Api call by jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $.ajax({
    url:"https://jsonsplaceholder.typicode.com/users",
    type:'GET',
    success:function (result){
    console.log(result);
    },
    error:function(error){
    console.log(error)
    }
    })
    })
    </script>
    </head>
    <body>
    </body>
    </html>
    
    The $.ajax method takes many parameters, some of which are required and others optional.It cotains two callback functions success and error to handle the response received.

    Conclusion

    Most of the real-time applications are using Axios to make HTTP requests. Axios is very easy and an open-source library for making HTTP requests.

    Thanks for reading