Anuradha Aggarwal
<DeveloperBlogs />

<DeveloperBlogs />

Four Ways To Make An API Calls In Javascript

Four Ways To Make An API Calls In Javascript

Anuradha Aggarwal

Published on Mar 28, 2021

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Table of contents

  • 🔎 XML HTTP Request
  • 🔎 Fetch
  • 🔎 Axios
  • 🔎 jQuery AJAX
  • Wrap Up!!

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

 
Share this