AbortController: Cancelling Fetch Requests and More

AbortController: Cancelling Fetch Requests and More | DevPrep

const controller = new AbortController();

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

// Cancel the request
controller.abort();

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

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

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

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

  return user ? <div>{user.name}</div> : <Loading />;
}

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

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

    // If query changes rapidly, previous requests are cancelled
    fetch(`/api/search?q=${query}`, { signal: controller.signal })
      .then(res => res.json())
      .then(setResults)
      .catch(err => {
        if (err.name !== "AbortError") console.error(err);
      });

    return () => controller.abort();
  }, [query]); // Previous fetch cancelled when query changes

  return <ul>{results.map(renderResult)}</ul>;
}

async function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, { signal: controller.signal });
    return await response.json();
  } finally {
    clearTimeout(timeoutId);
  }
}

// Or use AbortSignal.timeout() (modern browsers)
const response = await fetch(url, {
  signal: AbortSignal.timeout(5000)
});

// AbortSignal.any() — abort if ANY signal fires
const userCancel = new AbortController();
const response = await fetch(url, {
  signal: AbortSignal.any([
    userCancel.signal,
    AbortSignal.timeout(10000)
  ])
});

AbortController: Cancelling Fetch Requests and More

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

Basic Usage

React: Cancel on Unmount

Race Condition Prevention

Timeout Pattern

Combining Signals

Beyond Fetch