Javascript Api Call Cheatsheet

Below are the different types of API Calls you can perform in Javascript. You can use these methods to perform asyncrhonous api calls for fetch data from the specified URL.

1. XML HTTP Request
2. Fetch
3. Axios
4. jQuery Ajax

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 XMLHttoRequest();
request.open('GET', 'https://jsonplaceholder.typicode.com/todos');
request.send();
request.onload = ()=› {
  console.log(JSON.parse(request.response));
}

Fetch

The Fetch API in Javascript 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. The then() method tells the program what to do once Promise is completed.

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

Axios

Axios is an open-source library for making HTTP requests. It works on both Browsers and Node js servers. It can be included in an HTML file using an external CDN. Axios also returns promises like fetch API.

‹script sre="https://cdn.jsdelivr.net/npm/axios/dist/axios.min. js"›‹/script› 

axios.get ("https://jsonplaceholder.typicode.com/todos").then(response =› {
  console.log(response.data);
});

jQuery AJAX

The jQuery.Axax() method 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://jsonplaceholder.typicode.com/todos',
        type: "GET"
        success: function (result) {
            console.log(result);
        }
    })
})

Happy Coding!