DEV Community

Cover image for Stop Wasting API Calls: Learn API Request Cancellation in Modern JavaScript
Rajat
Rajat

Posted on

Stop Wasting API Calls: Learn API Request Cancellation in Modern JavaScript

#webdev #programming #javascript #discuss

In this guide, we’re diving deep into how the browser communicates with the server to cancel API calls, the role of AbortController in JavaScript, and how to implement it in real-world scenarios. We’ll back everything with demo code and interactive explanations—so by the time you're done reading, you'll be able to:

  • Optimize your app’s performance
  • Reduce unnecessary server load
  • Prevent race conditions in user interfaces
  • And write cleaner, smarter, and cancelable API logic in JavaScript

Whether you’re using vanilla JS, React, Angular, or Vue, the techniques you’ll learn here apply across the board.

🚀 What You'll Learn

✅ What is an API cancellation?

✅ How browsers and JavaScript handle cancellation

✅ Using AbortController and fetch

✅ Real code examples

✅ Server-side behavior on cancelled requests

✅ Best practices and gotchas

🧠 Why Should You Care?

In a world of dynamic UIs, especially with React, Angular, or Vue, cancelling redundant requests is a performance booster. It prevents:

  • Duplicate server calls
  • Race conditions
  • UI flickering from old data
  • Server overwork

💻 Let's Dive In – The JavaScript Side 

const controller = new AbortController(); const signal = controller.signal; fetch('https://api.example.com/data', { signal }) .then(response => response.json()) .then(data => console.log('Data:', data)) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch was cancelled'); } else { console.error('Fetch error:', error); } }); // Cancel the request after 1 second setTimeout(() => controller.abort(), 1000);
Enter fullscreen mode Exit fullscreen mode

👉 What's happening here?

We created a controller that gives us a signal. When we pass it to fetch(), we can abort the request anytime—like after a timeout or component unmount.

🌐 What Happens on the Server?

When you cancel a request, the browser closes the connection (TCP/socket). Depending on your server language, you can listen for this disconnection.

Image description

👇 Node.js Example (Express) 

app.get('/data', (req, res) => { req.on('close', () => { console.log('Client aborted the request!'); // Clean up any work }); // Simulate delay setTimeout(() => { res.json({ message: 'Here is your data' }); }, 5000); });
Enter fullscreen mode Exit fullscreen mode

The server receives a close event if the user aborts the request—a chance to clean up or skip expensive DB queries.

🧩 Real Use Case: Search Suggestions

Let’s say you’re building a search box. You want to cancel the previous API request if a new character is typed before the last one finishes.

Image description

let currentController; function onSearchInput(query) { if (currentController) { currentController.abort(); } currentController = new AbortController(); fetch(`/search?q=${query}`, { signal: currentController.signal }) .then(res => res.json()) .then(data => renderResults(data)) .catch(err => { if (err.name === 'AbortError') { console.log('Previous request aborted'); } else { console.error(err); } }); }
Enter fullscreen mode Exit fullscreen mode

💡 Best Practices

  • Always abort fetch on component unmount (React/Angular)
  • Use debouncing for inputs + cancellation
  • Avoid sending unnecessary requests on fast UIs
  • Handle AbortError to prevent breaking UX

🚧 What to Watch Out For

  • Only works with fetch, not XMLHttpRequest
  • Some older browsers need polyfill
  • Server must handle disconnection logic carefully
  • Aborting doesn't rollback server-side processing (unless you handle it)

📈 Wrapping Up – What Did You Learn?

By now, you should be comfortable with:

  • How to cancel fetch API requests using AbortController
  • What the browser does when it aborts a request
  • How the server can detect that cancellation
  • Why this improves UX and performance

🎯 Your Turn, Devs!

👀 Did this article spark new ideas or help solve a real problem?

💬 I'd love to hear about it!

✅ Are you already using this technique in your Angular or frontend project?

🧠 Got questions, doubts, or your own twist on the approach?

Drop them in the comments below — let’s learn together!

🙌 Let’s Grow Together!

If this article added value to your dev journey:

🔁 Share it with your team, tech friends, or community — you never know who might need it right now.

📌 Save it for later and revisit as a quick reference.

🚀 Follow Me for More Angular & Frontend Goodness:

I regularly share hands-on tutorials, clean code tips, scalable frontend architecture, and real-world problem-solving guides.

  • 💼 LinkedIn — Let’s connect professionally
  • 🎥 Threads — Short-form frontend insights
  • 🐦 X (Twitter) — Developer banter + code snippets
  • 👥 BlueSky — Stay up to date on frontend trends
  • 🌟 GitHub Projects — Explore code in action
  • 🌐 Website — Everything in one place
  • 📚 Medium Blog — Long-form content and deep-dives
  • 💬 Dev Blog — Free Long-form content and deep-dives

🎉 If you found this article valuable:

  • Leave a 👏 Clap
  • Drop a 💬 Comment
  • Hit 🔔 Follow for more weekly frontend insights

Let’s build cleaner, faster, and smarter web apps — together.

Stay tuned for more Angular tips, patterns, and performance tricks! 🧪🧠🚀

Top comments (0)