JavaScript AbortController

The Basic Pattern

Create an AbortController, pass its signal to fetch, and call abort() when you need to cancel:

const controller = new AbortController();

fetch('/api/data', { signal: controller.signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('Request was cancelled');
        } else {
            console.error('Real error:', err);
        }
    });

// Cancel the request
controller.abort();

When abort() is called, the fetch promise rejects with a DOMException named AbortError — not a network error [citation:7][citation:11].

Why AbortController Matters

Without cancellation, every request continues to completion — wasting bandwidth, CPU, and memory. Three common problems this solves:

• Race conditions: If a user types "React" then quickly "Vue", the "React" response might arrive after "Vue" and overwrite the correct results [citation:29].
• Memory leaks: If a component unmounts while a request is in flight, setting state on the unmounted component triggers warnings and leaks [citation:25].
• Wasted resources: A slow request the user no longer needs still consumes network bandwidth and server resources [citation:5].

Real-World Use Case: Search Autocomplete

The classic pattern — cancel the previous request before starting a new one:

let controller = null;

async function search(query) {
    // Cancel the previous request if it exists
    if (controller) controller.abort();

    // Create a new controller for this request
    controller = new AbortController();

    try {
        const response = await fetch(`/api/search?q=${query}`, {
            signal: controller.signal
        });
        const results = await response.json();
        renderResults(results);
    } catch (err) {
        if (err.name === 'AbortError') return; // Expected — ignore
        showError(err);
    }
}

Note: you must create a new controller for each request. Once aborted, a signal cannot be un-aborted [citation:29].

Implementing Timeouts

Modern browsers support AbortSignal.timeout(ms) for automatic cancellation after a delay [citation:7][citation:38]:

try {
    const response = await fetch('/api/slow', {
        signal: AbortSignal.timeout(5000)  // Cancel after 5s
    });
    const data = await response.json();
} catch (err) {
    if (err.name === 'TimeoutError') {
        console.error('Request timed out');
    } else {
        console.error('Other error:', err);
    }
}

Important: Timeouts throw TimeoutError, not AbortError. These are different and must be handled separately [citation:7][citation:25].

Cleanup in React (useEffect)

In React, always abort on cleanup to prevent state updates on unmounted components [citation:25]:

useEffect(() => {
    const controller = new AbortController();

    fetch(`/api/user/${userId}`, { signal: controller.signal })
        .then(res => res.json())
        .then(setUser)
        .catch(err => {
            if (err.name !== 'AbortError') setError(err);
        });

    return () => controller.abort();
}, [userId]);

When userId changes or the component unmounts, the previous request is cancelled automatically. This is the recommended pattern in React documentation [citation:25][citation:29].