Why Fetch + AbortController Is Replacing Axios for Modern Web Apps

For many years Axios dominated JavaScript HTTP requests thanks to its clean API, powerful features like interceptors and request cancellation, and broad browser compatibility.

However, as native browser capabilities have evolved, the core pain points that made Axios indispensable are now solved by the built‑in fetch API.

Why We Loved Axios

Axios tackled many XMLHttpRequest issues such as callback hell and provided features that early fetch versions lacked.

Native Advantages of fetch

Zero dependencies: no npm install required, resulting in no extra bundle size.

Native integration: seamless work with Service Workers, Cache API, and other modern browser APIs.

Lower‑level flexibility: fetch operates directly on Request and Response objects.

Nevertheless, fetch’s biggest drawback has been the lack of built‑in request cancellation or timeout, a feature that drove many developers to choose Axios.

AbortController Completes the Puzzle

The AbortController Web API fills this gap. Although not brand‑new, its widespread support and tight integration with fetch fundamentally change the game.

The operation of AbortController is simple:

Create an AbortController instance.

Obtain its signal object.

Pass the signal as an option to a fetch request.

When needed, call controller.abort(), which aborts the associated fetch and rejects its Promise with an AbortError.

1. Implement Request Cancellation

Imagine a user typing quickly in a search box, triggering a request on each keystroke; we only care about the final result. Using AbortController makes this trivial.

let controller;

async function handleSearch(query) {
  // Cancel the previous request if it is still pending
  if (controller) {
    controller.abort();
  }

  // Create a new controller for the new request
  controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(`/api/search?q=${query}`, { signal });
    const data = await response.json();
    console.log('Search results:', data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  }
}

2. Implement Request Timeout

Axios provides a convenient timeout option, but the same effect can be achieved with fetch and AbortController.

The recent addition of AbortSignal.timeout() finally addresses the last missing piece of fetch—native timeout support—completing its capabilities.

For all new, modern‑browser web projects, the combination of fetch + AbortController is the superior choice: lightweight, standards‑based, and fully featured.