Different ways to make API calls in javascript

APIs are essential for modern web applications, enabling data exchange between different systems.

In javascript their are different ways available to make API calls and handle API responses. In this blog we are going to see some of most popular ways of making API requests using JavaScript.

1. Using Fetch API :

This is most popular way of making API request in javascript and developer prefers this way most because it is simple and effective.

The Fetch API is a modern and native JavaScript API that allows you to make network requests. It returns a Promise, making it easy to handle asynchronous operations.

  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // Handle the data from the API response
    })
    .catch(error => {
      // Handle errors
    });

2. Using XMLHttpRequest :

XMLHttpRequest is an older but widely supported method to make API requests in JavaScript. It's not as user-friendly as the Fetch API, but it's still used in legacy projects or for specific use cases.

This is an older approach to make API request, instead of this you can prefer latest  methods like using Fetch or Axios.

  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      // Handle the data from the API response
    } else {
      // Handle errors
    }
  };
  xhr.send();

3. Using Axios :

Axios is a popular third-party library for making HTTP requests in JavaScript. It simplifies the process and provides additional features like interceptors and request cancellation.

As mentioned above Axios is third party library so first you have to include Axios's CDN into your html page to make it work.

Include below CDN first in your head section of HTML page.

 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Than you can make API request as below.

  axios.get('https://api.example.com/data')
  .then(response => {
    const data = response.data;
    // Handle the data from the API response
  })
  .catch(error => {
    // Handle errors
  });

4. Using jQuery AJAX :

This is also a third-party library for making HTTP requests in JavaScript. It has simple and effective method of making API requests in javascript.

As it's third party library so first you have to include Jquery's CDN into your html page to make it work.

Include below CDN first in your head section of HTML page.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Than you can make API request as below.

  $.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  dataType: 'json',
  success: function (data) {
    // Handle the data from the API response
  },
  error: function (error) {
    // Handle errors
  }
 });

Thanks for reading this article, if you found this article useful then share it with your friends and share your thoughts in comment section.

Want to learn more about javascript? checkout these amazing  Javascript Tutorials .