Daily micro-tips for C#, SQL, performance, and scalable backend engineering.
User navigates away but old fetch requests keep running in background. Cancel them properly with AbortController. Setup: const controller = new AbortController(); fetch(‘/api/data’, { signal: controller.signal }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => { if (error.name === ‘AbortError’) { console.log(‘Request cancelled’); } }); // Cancel when user leaves page window.addEventListener(‘beforeunload’, () => { […]
Uploading files with vanilla JavaScript is simpler than you think. FormData handles everything. HTML: <input type=”file” id=”fileInput” multiple> <button onclick=”uploadFiles()”>Upload</button> JavaScript: async function uploadFiles() { const input = document.getElementById(‘fileInput’); const formData = new FormData(); for (let file of input.files) { formData.append(‘files’, file); } const response = await fetch(‘/upload’, { method: ‘POST’, body: formData // Browser […]
Still using jQuery for AJAX? Modern JavaScript Fetch API with async/await is cleaner, faster, and built-in. Modern Fetch vs Old jQuery Comparison: // OLD jQuery way $.ajax({ url: ‘/api/users’, method: ‘GET’, dataType: ‘json’, success: function(data) { console.log(data); }, error: function(xhr, status, error) { console.error(error); } }); // MODERN Fetch API async function getUsers() { try […]
Network hiccups causing failed API requests? Axios interceptors can automatically retry failed requests before showing errors to users. Install Axios: npm install axios The Basic Retry Interceptor: import axios from ‘axios’; // Configure retry axios.interceptors.response.use( response => response, // Success – return as is async error => { const config = error.config; // If no […]
Your AJAX calls fail randomly due to network hiccups or server load? Implement smart retry logic that actually works. The Problem with Basic Retry: // Bad: Immediate retry can make things worse function badRetry(url, maxAttempts) { for (let i = 0; i < maxAttempts; i++) { try { return await fetch(url); } catch (error) { […]
Locally works.Production fails. Cause Preflight CORS requests. What happens Browser sends: OPTIONS /api/data Before: POST /api/data If server doesn’t handle OPTIONS → fail. Minimal fix (ASP.NET example) app.UseCors(builder => builder.AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); Why this matters Ajax failures are often network policy, not JS bugs.
Works locally. Fails in production. Hidden issue Browsers limit parallel connections per origin. Fix Batch requests Use request queues Prefer a single endpoint await Promise.allSettled(requests); Why Uncontrolled parallelism = dropped requests.
AJAX requests stall… server logs show nothing. Hidden reason Browsers limit parallel connections per origin (usually 6). When it happens Long-polling Hanging fetch calls Images + API calls from same domain Fix Abort unused requests Use AbortController const controller = new AbortController(); fetch(url, { signal: controller.signal }); // later controller.abort();
$.ajax({ timeout: 5000 }); Why it mattersPrevents hanging UI states.
let timeout; input.oninput = () => { clearTimeout(timeout); timeout = setTimeout(sendRequest, 300); }; Why it mattersLess load, better UX.
fetch(url, { method: “POST”, headers: { “Content-Type”: “application/json” }, body: JSON.stringify(data) }); Why it mattersAvoids silent model binding failures.
Multiple rapid requests = stale UI updates. const controller = new AbortController(); fetch(url, { signal: controller.signal }); controller.abort(); Why this mattersPrevents outdated responses from overwriting newer state.
Returning pre-rendered HTML via Ajax can outperform JSON → DOM rebuild. fetch(‘/comments’) .then(r => r.text()) .then(html => container.innerHTML = html); Why this worksLess JS work, fewer reflows, simpler rendering.
Network OK, UI frozen. Why it happensState updated outside render cycle. Why it mattersUsers see stale data. Vital fix Centralize state updates.
Old data overwrites new. Why it happensRequests return unpredictably. Why it mattersUI shows wrong state. Smart fixCancel previous requests.
User thinks page froze. Why it happensSynchronous requests or heavy callbacks. Why it mattersBad UX perception. Smart fixAlways async + lightweight callbacks.
Users click once. WhyButton not disabled during request. TipDisable button until response. button.disabled = true;
Correct response, old UI. WhyClient-side caching assumptions. TipExplicitly control cache headers.
Data arrives, UI lags. WhyDOM updates are too frequent. TipBatch DOM updates after Ajax responses.
Responses arrive out of sequence. WhyNetwork latency differences. TipAlways track request IDs.
Data loads fine, battery suffers. WhyPolling instead of event-driven updates. Tip Use push or conditional polling.
UI freezes briefly. WhyHeavy JSON parsing on main thread. Tip Offload parsing to Web Workers.
Desktop fine. Mobile broken. WhyMobile networks aggressively drop idle connections. Fix Set shorter request timeouts.
Server updated, client not. WhyAggressive caching on GET requests. Fix Add cache-busting headers or query tokens.
Direct calls succeed. WhyMissing forwarded headers. FixForward X-Forwarded-Proto.
No errors, no data. WhyServer closes connection before body flush. FixExplicitly flush response on server side.
Works when tab is active. WhyBrowser throttles background requests. FixUse Background Sync or retry logic.
No errors, no data. WhyCORS preflight blocked. FixAllow OPTIONS requests on server.
Local works, prod fails. WhyReverse proxy timeout limits. Fix Increase server timeout or chunk responses.
No errors, no data. Why it happensCORS preflight blocked by server config. FixAllow OPTIONS requests explicitly.