Q353 — You have one API call in progress and another API call is triggered. How do you cancel the first one?

The correct and modern approach is to use AbortController so that only the latest request remains active.

---

✅ Best Practice (Frontend – Browser / React)

🔹 Step-by-step Approach

1. Keep a reference to the previous request
2. Abort it before starting a new one
3. Create a new AbortController for the new request

---

🧪 Example (Plain JavaScript)

let controller;

function fetchData() {
  // Cancel previous request
  if (controller) {
    controller.abort();
  }

  // Create new controller
  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("Previous request cancelled");
      }
    });
}

---

🧪 Example (React Component – Recommended)

import { useEffect, useRef } from "react";

function Search({ query }) {
  const abortRef = useRef(null);

  useEffect(() => {
    if (!query) return;

    // Cancel previous request
    abortRef.current?.abort();

    const controller = new AbortController();
    abortRef.current = controller;

    fetch(`/api/search?q=${query}`, {
      signal: controller.signal
    })
      .then(res => res.json())
      .then(console.log)
      .catch(err => {
        if (err.name !== "AbortError") {
          console.error(err);
        }
      });

    return () => controller.abort(); // cleanup
  }, [query]);

  return null;
}

---

🧠 Why This Works

• Only one active request at a time
• Prevents race conditions
• Prevents outdated responses from updating UI
• Improves performance & UX

---

❓ What Happens on Backend?

• Backend still receives the request
• Frontend stops listening
• Backend can optionally detect disconnect using:

req.on("close", () => console.log("Client disconnected"));

---

🧪 Axios Alternative (Bonus)

const controller = new AbortController();

axios.get("/api/data", {
  signal: controller.signal
});

controller.abort();

---

🎯 Short Interview Answer

When a new API call is triggered, the previous request should be canceled using AbortController. Before starting the new request, call abort() on the previous controller so only the latest request remains active, preventing race conditions and stale data updates.

---

⭐ One-line summary

Abort the previous request using AbortController before firing a new API call.