AbortController

// Create abort controller
const controller = new AbortController();

// Start fetch with signal
fetch('https://api.example.com/data', {
  signal: controller.signal // ← Pass the signal
})
  .then(response => response.json())
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch was cancelled!');
    } else {
      console.error('Fetch error:', error);
    }
  });

// Cancel the request after 2 seconds
setTimeout(() => {
  controller.abort(); // ← Cancel!
  console.log('Request aborted');
}, 2000);

// If fetch takes longer than 2 seconds, it gets cancelled
// Output: "Request aborted" then "Fetch was cancelled!"

// Cancel previous search when user types new query
let currentController = null;

async function searchProducts(query) {
  // Cancel previous search if still running
  if (currentController) {
    currentController.abort();
    console.log('Cancelled previous search');
  }
  
  // Create new controller for this search
  currentController = new AbortController();
  
  try {
    const response = await fetch(
      `https://api.example.com/search?q=${query}`,
      { signal: currentController.signal }
    );
    
    const results = await response.json();
    displayResults(results);
    
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Search cancelled - user typed something new');
    } else {
      console.error('Search error:', error);
    }
  }
}

// User types in search box
searchProducts('laptop');      // Request 1 starts
searchProducts('laptop char'); // Request 1 cancelled, Request 2 starts
searchProducts('laptop charger'); // Request 2 cancelled, Request 3 starts

// Only the last search completes!
// 🎯 Benefit: Don't waste bandwidth on outdated searches

// Reusable function to fetch with timeout
async function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  
  // Set timeout to abort
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, timeout);
  
  try {
    const response = await fetch(url, {
      signal: controller.signal
    });
    
    clearTimeout(timeoutId); // Clear timeout if successful
    return await response.json();
    
  } catch (error) {
    clearTimeout(timeoutId);
    
    if (error.name === 'AbortError') {
      throw new Error(`Request timeout after ${timeout}ms`);
    }
    throw error;
  }
}

// Usage
try {
  const data = await fetchWithTimeout(
    'https://slow-api.example.com/data',
    3000 // 3 second timeout
  );
  console.log('Data:', data);
} catch (error) {
  console.error('Failed:', error.message);
}

// If request takes > 3 seconds: "Failed: Request timeout after 3000ms"

// Load page with multiple API calls
async function loadDashboard() {
  const controller = new AbortController();
  const signal = controller.signal;
  
  try {
    // Start all requests in parallel
    const [userData, postsData, commentsData] = await Promise.all([
      fetch('https://api.example.com/user', { signal }),
      fetch('https://api.example.com/posts', { signal }),
      fetch('https://api.example.com/comments', { signal })
    ]);
    
    const user = await userData.json();
    const posts = await postsData.json();
    const comments = await commentsData.json();
    
    displayDashboard(user, posts, comments);
    
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Dashboard load cancelled');
    } else {
      console.error('Error loading dashboard:', error);
    }
  }
  
  return controller; // Return so caller can abort
}

// Load dashboard
const dashboardController = await loadDashboard();

// User navigates away - cancel all requests at once!
window.addEventListener('beforeunload', () => {
  dashboardController.abort(); // Cancels ALL 3 requests!
});

// 🎯 One controller can abort multiple operations

// Custom async function that supports abort
async function processLargeFile(file, signal) {
  const chunks = splitIntoChunks(file);
  const results = [];
  
  for (let i = 0; i < chunks.length; i++) {
    // Check if aborted
    if (signal?.aborted) {
      throw new DOMException('Processing aborted', 'AbortError');
    }
    
    console.log(`Processing chunk ${i + 1}/${chunks.length}`);
    
    // Simulate processing
    await new Promise(resolve => setTimeout(resolve, 1000));
    results.push(processChunk(chunks[i]));
    
    // Listen for abort during processing
    signal?.addEventListener('abort', () => {
      throw new DOMException('Processing aborted', 'AbortError');
    });
  }
  
  return results;
}

// Usage
const controller = new AbortController();

processLargeFile(myFile, controller.signal)
  .then(results => {
    console.log('Processing complete!', results);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('User cancelled processing');
    }
  });

// User clicks cancel button
document.getElementById('cancelBtn').addEventListener('click', () => {
  controller.abort();
});

// 🎯 Your custom functions can support abort too!

// Modern way: Create signal with timeout built-in
try {
  const response = await fetch('https://api.example.com/data', {
    signal: AbortSignal.timeout(5000) // Auto-abort after 5 seconds
  });
  
  const data = await response.json();
  console.log(data);
  
} catch (error) {
  if (error.name === 'TimeoutError' || error.name === 'AbortError') {
    console.error('Request timed out!');
  } else {
    console.error('Fetch failed:', error);
  }
}

// 🎯 Cleaner than manually creating controller + setTimeout!

// Can also combine multiple signals
const controller = new AbortController();

const combinedSignal = AbortSignal.any([
  controller.signal,           // Manual abort
  AbortSignal.timeout(10000)  // Or timeout
]);

fetch('https://api.example.com/data', { signal: combinedSignal });

// Aborts if EITHER condition happens:
// - You call controller.abort()
// - Or 10 seconds pass