Table of contents
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.
