Vanilla JavaScript Data Fetching

Fetch and render remote data with vanilla JavaScript using async/await, AbortController for cancellation, loading state management, and error handling with.

Javascript Data Fetching Updated: 2026-01-15

Code

snippet

async function fetchData(url, { signal, retries = 3 } = {}) {
  for (let i = 0; i < retries; i++) {
    try {
      const res = await fetch(url, { signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return await res.json();
    } catch (err) {
      if (err.name === 'AbortError') throw err;
      if (i === retries - 1) throw err;
      await new Promise((r) => setTimeout(r, 2 ** i * 1000));
    }
  }
}