What are the different ways to make an API call in JavaScript?

TL;DR

In JavaScript, you can make API calls using several methods. The most common ones are XMLHttpRequest, fetch, and third-party libraries like Axios. XMLHttpRequest is the traditional way but is more verbose. fetch is modern and returns promises, making it easier to work with. Axios is a popular third-party library that simplifies API calls and provides additional features.

Different ways to make an API call in JavaScript

XMLHttpRequest

XMLHttpRequest is the traditional way to make API calls in JavaScript. It is more verbose and requires more code compared to modern methods.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

Fetch API

fetch is a modern and more convenient way to make API calls. It returns a promise, making it easier to handle asynchronous operations.

fetch('https://api.example.com/data')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) =>
    console.error('There was a problem with the fetch operation:', error),
  );

Axios

Axios is a popular third-party library that simplifies making API calls. It provides additional features like interceptors, automatic JSON transformation, and more.

axios
  .get('https://api.example.com/data')
  .then((response) => console.log(response.data))
  .catch((error) =>
    console.error('There was a problem with the Axios request:', error),
  );

jQuery AJAX

jQuery also provides an ajax method to make API calls. This method is less common in modern development but still used in some legacy projects.

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function (data) {
    console.log(data);
  },
  error: function (error) {
    console.error('There was a problem with the jQuery AJAX request:', error);
  },
});

Further reading

• MDN Web Docs: XMLHttpRequest
• MDN Web Docs: Fetch API
• Axios GitHub Repository
• jQuery AJAX Documentation