Developer Blog

Developer Blog

Four Ways To Make An API Calls In Javascript

Four Ways To Make An API Calls In Javascript

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hello developers!! In this post, we'll discuss various ways to make an API call for your next project.

🔎 XML HTTP Request

  • All modern browsers support the XMLHttpRequest object to request data from a server.
  • It works on the oldest browsers as well as on new ones.
  • It was deprecated in ES6 but is still widely used.
var request = new XMLHttpRequest();
request.open('GET', 'https://api.github.com/users/anuradha9712');
request.send();
request.onload = ()=>{
    console.log(JSON.parse(request.response));
}

🔎 Fetch

  • The Fetch API provides an interface for fetching resources (including across the network) in an asynchronous manner.
  • It returns a Promise
  • It is an object which contains a single value either a Response or an Error that occurred.
  • .then() tells the program what to do once Promise is completed.
fetch('https://api.github.com/users/anuradha9712')
.then(response =>{
    return response.json();
}).then(data =>{
    console.log(data);
})

🔎 Axios

  • It is an open-source library for making HTTP requests.
  • It works on both Browsers and Node js
  • It can be included in an HTML file by using an external CDN
  • It also returns promises like fetch API
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://api.github.com/users/anuradha9712')
.then(response =>{
    console.log(response.data)
})

🔎 jQuery AJAX

  • It performs asynchronous HTTP requests.
  • Uses $.ajax() method to make the requests.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
$(document).ready(function(){
    $.ajax({
        url: "https://api.github.com/users/anuradha9712",
        type: "GET",
        success: function(result){
            console.log(result);
        }
    })
})

Wrap Up!!

Thank you for your time!! Let's connect to learn and grow together.

LinkedIn Twitter Instagram

Buy-me-a-coffee

#javascript#ajax#apis#beginners-learningtocode-100daysofcode#axios
 
Share this