Bits of .NET

🛑 Stop Slow Requests When User Navigates

User typed new search term? Old request still running. AbortController cancels fetch. Save bandwidth, avoid race conditions.

📝 Basic Usage

const controller = new AbortController();
const signal = controller.signal;

// Start request
fetch('/api/search', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Request cancelled');
    } else {
      console.error('Network error', err);
    }
  });

// Cancel request after 3 seconds
setTimeout(() => controller.abort(), 3000);

🎯 Search Autocomplete

let currentController = null;

async function search(query) {
  // Cancel previous request
  if (currentController) {
    currentController.abort();
  }
  
  // Create new controller
  currentController = new AbortController();
  
  try {
    const response = await fetch(`/api/search?q=${query}`, {
      signal: currentController.signal
    });
    const results = await response.json();
    displayResults(results);
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('Search cancelled, user typed faster');
    }
  }
}

// On each keystroke
input.addEventListener('input', (e) => search(e.target.value));

✅ Cancel Multiple Requests

• Same AbortController can abort multiple fetches
• Useful for component unmount (React useEffect cleanup)
• Prevents memory leaks and state updates on unmounted components