const req = new Request("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice" }),
});

console.log(req.method);                     // 'POST'
console.log(req.url);                        // 'https://api.example.com/users'
console.log(req.headers.get("content-type")); // 'application/json'

// Pass a Request directly to fetch
const response = await fetch(req);

const cloned = req.clone();  // safe to consume the body twice

// Construct a Response manually
const fake = new Response(JSON.stringify({ id: 1 }), {
  status: 200,
  headers: { "Content-Type": "application/json" },
});

console.log(await fake.json()); // { id: 1 }

// Useful constants
Response.error();              // returns a network-error Response
Response.redirect("/new", 302); // returns a redirect Response
Response.json({ ok: true });   // shortcut (Node 21+, Bun, Deno)

const response = await fetch("https://api.example.com/users");
const users = await response.json();
console.log(users);

[
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
]

// Response formats
const json = await response.json();          // parse body as JSON
const text = await response.text();          // raw text string
const blob = await response.blob();          // binary Blob (images, etc.)
const buffer = await response.arrayBuffer(); // raw ArrayBuffer
const form = await response.formData();      // FormData (multipart responses)

const response = await fetch("/api/data");
const copy = response.clone();
const textVersion = await copy.text();      // log it
const parsedVersion = await response.json(); // use it

const res = await fetch(url, { method: "DELETE" });
const data = res.status === 204 ? null : await res.json();

const response = await fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9...",
  },
  body: JSON.stringify({ name: "Carol", role: "admin" }),
});

if (!response.ok) {
  throw new Error(`HTTP error: ${response.status}`);
}

const created = await response.json();
console.log(created);

{ id: 3, name: 'Carol', role: 'admin', createdAt: '2026-04-26T10:00:00Z' }

// PUT — full replacement
await fetch(`https://api.example.com/users/3`, {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Carol", role: "moderator" }),
});

// PATCH — partial update
await fetch(`https://api.example.com/users/3`, {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ role: "moderator" }),
});

// DELETE
const res = await fetch(`https://api.example.com/users/3`, {
  method: "DELETE",
});
console.log(res.status); // 204

// Using new Headers()
const headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("X-Request-ID", crypto.randomUUID());

// Plain object shorthand (most common)
const response = await fetch(url, {
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
    Authorization: `Bearer ${token}`,
  },
});

// Reading response headers
console.log(response.headers.get("content-type"));
console.log(response.headers.get("x-ratelimit-remaining"));

// Iterate all response headers
for (const [key, value] of response.headers) {
  console.log(`${key}: ${value}`);
}

const response = await fetch("https://api.example.com/data");

console.log(response.ok);         // true if status 200–299
console.log(response.status);     // 200, 404, 500, …
console.log(response.statusText); // "OK", "Not Found", …
console.log(response.url);        // final URL after redirects
console.log(response.redirected); // true if a redirect occurred
console.log(response.type);       // "basic" | "cors" | "opaque"

async function getUser(id) {
  let response;
  try {
    response = await fetch(`/api/users/${id}`);
  } catch (networkErr) {
    // DNS failure, offline, etc.
    throw new Error(`Network error: ${networkErr.message}`);
  }

  if (!response.ok) {
    // 404, 500, etc. — fetch does NOT reject here
    const body = await response.text();
    throw new Error(`HTTP ${response.status}: ${body}`);
  }

  return response.json();
}

const response = await fetch("https://example.com/large-file.csv");
const reader = response.body.getReader();
const decoder = new TextDecoder();
let received = 0;

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  received += value.length;
  console.log(`Received ${received} bytes`);
  process.stdout.write(decoder.decode(value, { stream: true }));
}

Received 16384 bytes
Received 32768 bytes
Received 49152 bytes
…

const response = await fetch("https://example.com/large-file.csv");
const decoder = new TextDecoder();
let received = 0;

for await (const chunk of response.body) {
  received += chunk.length;
  process.stdout.write(decoder.decode(chunk, { stream: true }));
}
console.log(`\nTotal: ${received} bytes`);

…
Total: 524288 bytes

const response = await fetch("https://api.example.com/events");
const decoder = new TextDecoder();
let buffer = "";

for await (const chunk of response.body) {
  buffer += decoder.decode(chunk, { stream: true });
  const lines = buffer.split("\n");
  buffer = lines.pop();  // last partial line stays in buffer
  for (const line of lines) {
    if (line.trim()) console.log(JSON.parse(line));
  }
}

{ type: 'event', id: 1 }
{ type: 'event', id: 2 }
{ type: 'event', id: 3 }

import { createReadStream } from "node:fs";
import { Readable } from "node:stream";

await fetch("https://api.example.com/upload", {
  method: "POST",
  body: Readable.toWeb(createReadStream("./large.bin")),
  duplex: "half",  // required when streaming a body
  headers: { "Content-Type": "application/octet-stream" },
});

const controller = new AbortController();

// Cancel after 5 seconds
const timer = setTimeout(() => controller.abort(), 5000);

try {
  const response = await fetch("/api/slow-endpoint", {
    signal: controller.signal,
  });
  clearTimeout(timer);
  return response.json();
} catch (err) {
  if (err.name === "AbortError") {
    console.log("Request was aborted");
  } else {
    throw err;
  }
}

// Cleaner: built-in timeout signal (no manual setTimeout cleanup needed)
const response = await fetch("/api/data", {
  signal: AbortSignal.timeout(5000), // aborts after 5 s
});

let controller = new AbortController();

searchInput.addEventListener("input", async (e) => {
  controller.abort();              // cancel previous in-flight request
  controller = new AbortController();
  try {
    const res = await fetch(`/api/search?q=${e.target.value}`, {
      signal: controller.signal,
    });
    renderResults(await res.json());
  } catch (err) {
    if (err.name !== "AbortError") throw err;
  }
});

// Upload a File from an <input type="file">
const fileInput = document.querySelector("#avatar");
const file = fileInput.files[0];

const formData = new FormData();
formData.append("avatar", file);
formData.append("userId", "42");

const response = await fetch("/api/upload", {
  method: "POST",
  body: formData,
  // Do NOT set Content-Type manually — the browser sets it with the boundary
});

// Upload a raw Blob
const blob = new Blob([JSON.stringify({ key: "val" })], {
  type: "application/json",
});
await fetch("/api/raw", { method: "PUT", body: blob });

// same-origin only: send cookies on same-origin requests
fetch("/api/me", { credentials: "same-origin" });

// cross-origin: send cookies and auth headers to any origin
fetch("https://api.other.com/me", { credentials: "include" });

// never send credentials (default)
fetch(url, { credentials: "omit" });

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400
Access-Control-Allow-Credentials: true   # only if credentials: 'include'

const response = await fetch("https://api.other.com/me", {
  mode: "cors",  // default
  credentials: "include",
});

console.log(response.type);  // 'cors' | 'basic' | 'opaque' | 'error'

import { Agent } from "undici";

const agent = new Agent({
  connections: 50,             // max sockets per origin (default 10)
  pipelining: 1,               // HTTP/1.1 pipelining (0 to disable)
  keepAliveTimeout: 10_000,
  connect: { rejectUnauthorized: false },  // skip TLS verify (testing only)
});

const response = await fetch("https://internal.example.com/api", {
  dispatcher: agent,
});

import { ProxyAgent } from "undici";

const proxyAgent = new ProxyAgent("http://proxy.corp:8080");

const response = await fetch("https://api.example.com", {
  dispatcher: proxyAgent,
});
console.log(response.status);

200

import { setGlobalDispatcher, Agent } from "undici";

setGlobalDispatcher(new Agent({ connections: 100 }));
// All subsequent fetch() calls use this dispatcher

// Bun-specific options on the second arg
const response = await fetch("https://api.example.com", {
  verbose: true,        // log low-level transport (Bun-only)
  proxy: "http://localhost:8888",  // Bun-only shorthand
  tls: { rejectUnauthorized: false },
});

// Deno-specific HttpClient with custom CA
const client = Deno.createHttpClient({
  caCerts: [await Deno.readTextFile("./internal-ca.pem")],
});

const response = await fetch("https://internal.example.com", { client });
client.close();

async function fetchWithRetry(url, init = {}, { retries = 3, baseMs = 200 } = {}) {
  let lastErr;
  for (let attempt = 0; attempt <= retries; attempt++) {
    try {
      const response = await fetch(url, {
        ...init,
        signal: init.signal ?? AbortSignal.timeout(5000),
      });
      // Retry on 5xx and 429; bail on 4xx
      if (response.status >= 500 || response.status === 429) {
        throw new Error(`Retryable status: ${response.status}`);
      }
      return response;
    } catch (err) {
      lastErr = err;
      if (attempt === retries) break;
      const jitter = Math.random() * baseMs;
      const wait = baseMs * 2 ** attempt + jitter;
      await new Promise((r) => setTimeout(r, wait));
    }
  }
  throw lastErr;
}

const res = await fetchWithRetry("https://api.example.com/flaky");
console.log(res.status);

200

const userCancel = new AbortController();
const signal = AbortSignal.any([
  userCancel.signal,
  AbortSignal.timeout(10_000),
]);

const response = await fetch("/api/slow", { signal });

import { z } from "zod";

const User = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
});

async function getUser(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return User.parse(await response.json());  // throws ZodError on schema mismatch
}

const alice = await getUser(1);
console.log(alice);

{ id: 1, name: 'Alice Dev', email: 'alice@example.com' }

async function* readSSE(url, init) {
  const response = await fetch(url, init);
  const decoder = new TextDecoder();
  let buffer = "";
  for await (const chunk of response.body) {
    buffer += decoder.decode(chunk, { stream: true });
    const events = buffer.split("\n\n");
    buffer = events.pop();
    for (const ev of events) {
      const line = ev.split("\n").find((l) => l.startsWith("data: "));
      if (line) yield JSON.parse(line.slice(6));
    }
  }
}

for await (const ev of readSSE("https://api.example.com/stream")) {
  console.log(ev);
}

{ token: 'Hello' }
{ token: ' ' }
{ token: 'world' }

async function fetchAll(urls, { concurrency = 5 } = {}) {
  const results = new Array(urls.length);
  let i = 0;
  async function worker() {
    while (i < urls.length) {
      const idx = i++;
      const res = await fetch(urls[idx]);
      results[idx] = await res.json();
    }
  }
  await Promise.all(Array.from({ length: concurrency }, worker));
  return results;
}

const data = await fetchAll([
  "https://api.example.com/1",
  "https://api.example.com/2",
  "https://api.example.com/3",
]);
console.log(data.length);

3

let etag = null;
let cached = null;

async function getCachedJson(url) {
  const response = await fetch(url, {
    headers: etag ? { "If-None-Match": etag } : {},
  });
  if (response.status === 304) return cached;
  etag = response.headers.get("etag");
  cached = await response.json();
  return cached;
}

const response = await fetch("https://example.com/large.bin");
const total = Number(response.headers.get("content-length")) || 0;
let received = 0;
const chunks = [];

for await (const chunk of response.body) {
  chunks.push(chunk);
  received += chunk.length;
  if (total) {
    const pct = ((received / total) * 100).toFixed(1);
    process.stdout.write(`\r${pct}% (${received}/${total} bytes)`);
  }
}
const blob = new Blob(chunks);
console.log(`\nDone: ${blob.size} bytes`);

100.0% (10485760/10485760 bytes)
Done: 10485760 bytes

async function apiFetch(path, options = {}) {
  const base = "https://api.example.com";
  const token = localStorage.getItem("token");

  const response = await fetch(`${base}${path}`, {
    ...options,
    headers: {
      "Content-Type": "application/json",
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
      ...options.headers,
    },
    signal: options.signal ?? AbortSignal.timeout(10_000),
  });

  if (!response.ok) {
    const error = await response.json().catch(() => ({ message: response.statusText }));
    throw Object.assign(new Error(error.message ?? "Request failed"), {
      status: response.status,
    });
  }

  // Return null for 204 No Content
  if (response.status === 204) return null;
  return response.json();
}

// Usage
const user = await apiFetch("/users/1");
const created = await apiFetch("/users", {
  method: "POST",
  body: JSON.stringify({ name: "Dave" }),
});