Fetch and HTTP

// GET (default)
const res = await fetch('/api/data');
const json = await res.json();

// POST with JSON body
const res = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice' }),
});
const data = await res.json();

const headers = new Headers({ 'Content-Type': 'application/json' });
headers.set('Authorization', 'Bearer token');
headers.append('X-Custom', 'value');
headers.get('content-type'); // 'application/json'
headers.has('Authorization'); // true
headers.delete('X-Custom');

// Iterate
for (const [key, val] of headers) { /* … */ }
headers.forEach((val, key) => { /* … */ });

const req = new Request('/api/data', {
  method: 'GET',
  headers: { Accept: 'application/json' },
});

req.url;      // full URL string
req.method;   // 'GET'
req.headers;  // Headers object
req.clone();  // clone before passing to fetch

fetch(req).then(/* … */);

const controller = new AbortController();
const { signal } = controller;

fetch('/api/slow', { signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') console.log('Request aborted');
  });

// Cancel after 5 s
setTimeout(() => controller.abort(), 5000);
// Pass a reason
controller.abort(new Error('User cancelled'));

// AbortSignal.timeout() — no controller needed
const res = await fetch('/api/data', {
  signal: AbortSignal.timeout(3000), // ms
});

async function apiFetch(url, options) {
  const res = await fetch(url, options);
  if (!res.ok) {
    const body = await res.text();
    throw new Error(`HTTP ${res.status}: ${body}`);
  }
  return res.json();
}

const form = new FormData();
form.append('username', 'alice');
form.append('avatar', fileInput.files[0]);

// Do NOT set Content-Type manually — browser sets multipart boundary
await fetch('/api/upload', { method: 'POST', body: form });

const res = await fetch('/api/stream');
const reader = res.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(decoder.decode(value, { stream: true }));
}

const res = await fetch('/api/stream');
for await (const chunk of res.body) {
  console.log(new TextDecoder().decode(chunk));
}

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', e => {
  if (e.lengthComputable) console.log(e.loaded / e.total);
});
xhr.open('POST', '/api/upload');
xhr.send(formData);
xhr.onload = () => console.log(xhr.status, xhr.responseText);

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true /* async */);
xhr.responseType = 'json'; // '', 'arraybuffer', 'blob', 'document', 'json', 'text'
xhr.timeout = 5000;        // ms
xhr.setRequestHeader('Accept', 'application/json');

xhr.onload = () => console.log(xhr.status, xhr.response);
xhr.onerror = () => console.error('Network error');
xhr.ontimeout = () => console.error('Timeout');
xhr.onprogress = e => console.log(e.loaded, e.total);
xhr.onreadystatechange = () => {
  // readyState: 0 UNSENT, 1 OPENED, 2 HEADERS_RECEIVED, 3 LOADING, 4 DONE
};
xhr.send(null); // or body
xhr.abort();

// Include cookies / auth headers cross-origin
fetch('https://api.example.com/data', { credentials: 'include' });

// Retry with exponential backoff
async function fetchWithRetry(url, opts, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const res = await fetch(url, opts);
      if (!res.ok && res.status >= 500) throw new Error(res.status);
      return res;
    } catch (err) {
      if (i === retries - 1) throw err;
      await new Promise(r => setTimeout(r, 2 ** i * 500));
    }
  }
}

// JSON helper
const get = url => fetch(url).then(r => r.ok ? r.json() : Promise.reject(r));

// Base URL wrapper
const api = (path, opts) => fetch(`https://api.example.com${path}`, {
  ...opts,
  headers: { Authorization: `Bearer ${token}`, ...opts?.headers },
});

const es = new EventSource('/api/events');
// named event
es.addEventListener('update', e => console.log(JSON.parse(e.data)));
// unnamed / message event
es.onmessage = e => console.log(e.data);
es.onerror = e => console.error(e);
es.close();

// With credentials
const es2 = new EventSource('/api/events', { withCredentials: true });