Fetch API Abort Controller in JavaScript

Have you ever needed to stop a web request in its tracks? Maybe a user clicked away, or a request is taking forever? That’s where the Abort Controller comes in! It’s like having a big red “STOP” button for your network requests.

What is Abort Controller?

Think of it as a remote control for your fetch requests. It lets you cancel them whenever you want.

Two Key Pieces:

1. AbortController: The remote control itself.
2. AbortSignal: The signal you send from the remote to the request.

Basic Example: Stop a Request

Let’s see how to use it:

// 1. Get your remote control
const controller = new AbortController();

// 2. Get the signal to send
const signal = controller.signal;

// 3. Start your fetch request and attach the signal
fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
  .then(response => response.json())
  .then(data => console.log("Success:", data))
  .catch(error => {
    // 4. If aborted, you'll land here
    if (error.name === 'AbortError') {
      console.log("Uh oh! The request was cancelled.");
    } else {
      console.error("Another kind of error happened:", error);
    }
  });

// 5. Press the STOP button at any time!
controller.abort();

What happens when you run this?

• The request starts.
• Immediately after (or very quickly), controller.abort() is called.
• The fetch is cancelled.
• The .catch block runs.
• Inside the catch, error.name is 'AbortError'.
• So, the output in the console will be: Uh oh! The request was cancelled.

Real-World Uses (Why You’ll Love It)

1. Search As You Type

Imagine a search box. Every time the user types, you want to fetch suggestions. But you don’t want old requests piling up!

let searchController = null; // Keep track of the current request

function search(query) {
  // If there's an old request, cancel it!
  if (searchController) {
    searchController.abort();
  }

  // Get a new remote control for this request
  searchController = new AbortController();

  fetch(`https://api.example.com/search?q=${query}`, {
    signal: searchController.signal
  })
  .then(response => response.json())
  .then(results => {
    console.log("Search results for", query, ":", results);
    // Update your UI with the results
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // This is fine, it was just an old request being cancelled
      console.log("Old search request cancelled.");
    } else {
      console.error("Search failed:", error);
    }
  });
}

// Simulate typing
search("J");     // Starts request 1
search("Ja");    // Cancels request 1, starts request 2
search("Jav");   // Cancels request 2, starts request 3
search("Java");  // Cancels request 3, starts request 4

// Output (likely):
// Old search request cancelled.
// Old search request cancelled.
// Old search request cancelled.
// Search results for Java : { ...data... }

2. Timeout Long Requests

Don’t let slow servers hang your app forever!

function fetchWithTimeout(url, timeout = 5000) { // Default 5 seconds
  // Get the remote control
  const controller = new AbortController();

  // Set a timer to press the STOP button
  const timeoutId = setTimeout(() => {
    controller.abort();
    console.log("Request timed out!");
  }, timeout);

  // Start the fetch with the signal
  return fetch(url, { signal: controller.signal })
    .then(response => {
      // If successful, clear the timeout so it doesn't run later
      clearTimeout(timeoutId);
      return response.json();
    })
    .catch(error => {
      // Clear the timeout here too, just in case it finished quickly
      clearTimeout(timeoutId);
      if (error.name === 'AbortError') {
        throw new Error("The request took too long and was cancelled.");
      } else {
       throw error; // Re-throw other errors
      }
    });
}

// Try fetching something that might be slow
fetchWithTimeout('https://httpstat.us/200?sleep=10000', 3000) // Wait max 3 seconds
  .then(data => console.log("Got data:", data))
  .catch(error => console.error("Error:", error.message));

// Output (after 3 seconds):
// Request timed out!
// Error: The request took too long and was cancelled.

Summary

The Abort Controller is a simple but incredibly useful tool. It gives you power over your network requests, preventing resource waste and making your apps feel snappier. Remember:

• Create an AbortController.
• Pass its signal to fetch.
• Call controller.abort() when you want to stop the request.
• Handle the AbortError in your catch block.

Start using it today and take control of your JavaScript!