JavaScript Fetch API

const res = await fetch("/api/data");

// Properties:
res.ok;          // true if status 200-299
res.status;      // 200, 404, 500, etc.
res.statusText;  // "OK", "Not Found", etc.
res.headers;     // Headers object
res.url;         // final URL (after redirects)
res.redirected;  // true if redirected

// Body methods (each can only be called ONCE):
const json = await res.json();    // parse as JSON
const text = await res.text();    // parse as text
const blob = await res.blob();    // parse as Blob
const buffer = await res.arrayBuffer(); // raw bytes
const form = await res.formData(); // parse as FormData

// POST with JSON body:
const response = await fetch("/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "Alice",
    email: "alice@example.com"
  }),
});

const newUser = await response.json();
console.log(newUser.id); // server-assigned ID

// PUT (update entire resource):
await fetch(`/api/users/${id}`, {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Bob", email: "bob@test.com" }),
});

// PATCH (partial update):
await fetch(`/api/users/${id}`, {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Bob Updated" }),
});

// DELETE:
await fetch(`/api/users/${id}`, {
  method: "DELETE",
});

// Full fetch options:
const response = await fetch(url, {
  method: "POST",          // GET, POST, PUT, PATCH, DELETE
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer <token>",
    "X-Custom-Header": "value",
  },
  body: JSON.stringify(data), // request body
  credentials: "include",     // send cookies cross-origin
  cache: "no-store",          // bypass cache
  mode: "cors",               // cors, no-cors, same-origin
  signal: controller.signal,  // for aborting
});

// Working with Headers object:
const headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("Authorization", "Bearer token123");

// Reading response headers:
const res = await fetch(url);
res.headers.get("Content-Type");  // "application/json"
res.headers.has("X-Custom");      // true/false

// Send form data (browser sets Content-Type automatically):
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("name", "document.pdf");

await fetch("/api/upload", {
  method: "POST",
  body: formData, // no Content-Type header needed!
});

// Create a controller:
const controller = new AbortController();

// Pass its signal to fetch:
fetch("/api/large-data", {
  signal: controller.signal
})
  .then(res => res.json())
  .then(data => display(data))
  .catch(err => {
    if (err.name === "AbortError") {
      console.log("Request was cancelled");
    } else {
      throw err; // real error
    }
  });

// Cancel the request:
controller.abort(); // triggers AbortError

// Practical: timeout after 5 seconds
async function fetchWithTimeout(url, ms = 5000) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), ms);
  
  try {
    const res = await fetch(url, { signal: controller.signal });
    return await res.json();
  } finally {
    clearTimeout(timeout);
  }
}

// Practical: cancel on component unmount (React)
useEffect(() => {
  const controller = new AbortController();
  
  fetch("/api/data", { signal: controller.signal })
    .then(res => res.json())
    .then(setData);
  
  return () => controller.abort(); // cleanup
}, []);