6 Ways to Make API Requests in JavaScript: A Developer’s Guide

JavaScript powers much of the modern web, and making API requests is a core skill for developers building dynamic applications. From fetching data to updating servers, there are several tools and methods available. Here’s a breakdown of six practical ways to make API requests in JavaScript, complete with insights and a quick tutorial for each.

1. XMLHttpRequest: The Classic Approach

XMLHttpRequest (XHR) is a built-in browser API that kicked off the era of asynchronous web requests. It lets developers send and receive data between a client and server without reloading the page.
How to Use It:

javascript

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

Pros: Widely supported, no dependencies.
Cons: Verbose and outdated compared to newer options.

2. Fetch: The Modern Standard

The Fetch API, native to JavaScript, simplifies network requests with a cleaner syntax and promise-based structure. It’s a go-to for most developers today.
How to Use It:

javascript

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

Pros: Easy to use, built-in, supports promises.
Cons: No timeout option by default.

3. Fetch with AbortController: Adding Timeout Control

Fetch doesn’t natively handle timeouts, but pairing it with AbortController fixes that. This is handy for canceling requests that take too long.
How to Use It:

javascript

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000); // 5-second timeout
fetch("https://api.example.com/data", { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Aborted or failed:", error));
clearTimeout(timeout);

Pros: Adds control over request duration.
Cons: Slightly more setup.

4. Axios: The Powerhouse Library

Axios is a popular, promise-based HTTP client that works in both browsers and Node.js. It’s packed with features like automatic JSON parsing and error handling.
How to Use It: First, install it via npm (npm install axios) or a CDN. Then:

javascript

axios.get("https://api.example.com/data")
  .then(response => console.log(response.data))
  .catch(error => console.error("Error:", error));

Pros: Feature-rich, handles edge cases well.
Cons: Requires an external library.

5. jQuery Get: For Legacy Fans

If your project uses jQuery, its $.get method offers a simple way to make API calls. It’s still relevant for older systems.
How to Use It: Include jQuery, then:

javascript

$.get("https://api.example.com/data", data => {
  console.log(data);
}).fail(error => console.error("Error:", error));

Pros: Quick for jQuery users.
Cons: Adds a bulky dependency for new projects.

6. Got: Node.js’s Modern Choice

For Node.js developers, the Got library shines with its promise support, retries, and streaming capabilities.
How to Use It: Install it (npm install got), then:

javascript

const got = require("got");
(async () => {
  try {
    const response = await got("https://api.example.com/data");
    console.log(JSON.parse(response.body));
  } catch (error) {
    console.error("Error:", error);
  }
})();

Pros: Lightweight, powerful for Node.js.
Cons: Node.js only, not browser-compatible.

Why It Matters

APIs are the backbone of web apps, connecting frontends to data sources. Whether you’re sticking with browser-native tools like Fetch or tapping into libraries like Axios, each method has its place. For simple projects, Fetch is often enough. For complex needs, Axios or Got might save the day. Pick the tool that fits your stack—and happy coding!