How many ways we can call an API in JavaScript

In this article we will learn about How many ways we can call an API in JavaScript. The APIs are now the essential part of every application, we discuss here how we can make call an API in JavaScript. There are four ways we can make call the API in JavaScript. Mainly there are below ways we call call an API in JavaScript.

• XMLHttpRequest
• Fetch
• Axios
• jQuery

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.

Before JavaScript ES6 came out, the only way to make an HTTP request in JavaScript was XMLHttpRequest. It’s a built-in browser object that allows us to make HTTP requests in JavaScript.

JSONPlaceholder is a free online REST API that you can use whenever you need fake data.

<script type="text/javascript">
    var request = new XMLHttpRequest();
    request.open('GET', 'https://jsonplaceholder.typicode.com/todos');
    request.send();
    request.onload = () => {
        console.log(JSON.parse(request.response));
    }
</script>

We can see on below, the XMLHttpRequest gives the output call like below.

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.

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

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>

<script type="text/javascript">
    axios.get('https://jsonplaceholder.typicode.com/todos')
        .then(response => {
            console.log(response.data)
        })
</script>

Axios provides the following advantages:

• Axios performs automatic transformations and returns the data in JSON format.
• Better error handling.
• Axios has a wide range of supported browsers.

 jQuery AJAX

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "https://jsonplaceholder.typicode.com/todos",
            type: "GET",
            success: function (result) {
                console.log(result);
            }
        })
    })
</script>

The $.ajax method takes many parameters, some that are required and others that are optional. It contains two callback functions success and error to handle the response received.

Conclusion

In this article we discussed about How many ways we can call an API in JavaScript.

Leave behind your valuable queries and suggestions in the comment section below. Also, if you think this article helps you, do not forget to share this with your developer community. Happy Coding 🙂

Related Articles

• Create a RESTful CRUD API With NodeJS, ExpressJS And MongoDB – Complete Guide
• Synchronous and Asynchronous in JavaScript
• How many ways we can call an API in JavaScript
• How to read external JSON file in Jquery AJAX
• JavaScript Form Validation

Support me