JAVASCRIPT
Cancelling Pending API Requests to Prevent Race Conditions
Learn how to cancel ongoing fetch requests using AbortController in JavaScript to prevent race conditions and optimize performance in dynamic web applications.
let abortController;
async function fetchDataWithCancellation(url) {
if (abortController) {
abortController.abort(); // Abort previous request if pending
}
abortController = new AbortController();
const signal = abortController.signal;
try {
const response = await fetch(url, { signal });
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('Fetched data:', data);
return data;
} catch (error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted:', url);
return null; // Or handle specifically as an aborted request
}
console.error('Fetch error:', error);
throw error;
} finally {
abortController = null; // Clear controller after request completes or errors
}
}
// Example Usage:
// User types quickly, previous search requests are cancelled.
// fetchDataWithCancellation('https://api.example.com/search?q=apple');
// setTimeout(() => fetchDataWithCancellation('https://api.example.com/search?q=banana'), 300);
// setTimeout(() => fetchDataWithCancellation('https://api.example.com/search?q=cherry'), 600);
How it works: This snippet demonstrates how to cancel a pending `fetch` request using `AbortController`. This is crucial in scenarios like a search bar where rapidly changing input can trigger multiple API calls, leading to race conditions or unnecessary network traffic. By aborting previous requests, only the latest relevant request completes, ensuring UI consistency and reducing server load.