Fetch API and Network Requests

// Simple GET request
fetch("/api/users")
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log("Users:", data);
  })
  .catch((error) => {
    console.error("Fetch error:", error);
  });

// Async/await pattern (preferred)
async function fetchUsers() {
  try {
    const response = await fetch("/api/users");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}

// POST request with JSON
async function createUser(userData) {
  const response = await fetch("/api/users", {
    "method": "POST",
    "headers": {
      "Content-Type": "application/json"
    },
    "body": JSON.stringify(userData)
  });
  return response.json();
}

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

const response = await fetch("/api/protected", {
  "method": "GET",
  "headers": headers,
  "credentials": "include" // Send cookies
});

// Check response headers
console.log("Content-Type:", response.headers.get("content-type"));
console.log("Has header:", response.headers.has("x-custom"));

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

// FormData for file upload
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("description", "Profile picture");

await fetch("/api/upload", {
  "method": "POST",
  "body": formData // Content-Type auto-set to multipart/form-data
});

// Basic abort pattern
const controller = new AbortController();
const signal = controller.signal;

fetch("/api/data", { signal })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => {
    if (error.name === "AbortError") {
      console.log("Fetch aborted");
    } else {
      console.error("Fetch error:", error);
    }
  });

// Abort after 5 seconds
setTimeout(() => controller.abort(), 5000);

// Abort on user action
cancelButton.addEventListener("click", () => {
  controller.abort("User cancelled");
});

// Timeout utility
function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);
  
  return fetch(url, {
    ...options,
    "signal": controller.signal
  }).finally(() => clearTimeout(id));
}

// Usage
try {
  const response = await fetchWithTimeout("/api/slow", {}, 3000);
  const data = await response.json();
} catch (error) {
  if (error.name === "AbortError") {
    console.error("Request timed out");
  }
}

// Stream large file download with progress
async function downloadWithProgress(url) {
  const response = await fetch(url);
  const contentLength = response.headers.get("content-length");
  const total = parseInt(contentLength, 10);
  let loaded = 0;
  
  const reader = response.body.getReader();
  const chunks = [];
  
  while (true) {
    const { done, value } = await reader.read();
    
    if (done) break;
    
    chunks.push(value);
    loaded += value.length;
    const progress = (loaded / total) * 100;
    console.log(`Progress: ${progress.toFixed(2)}%`);
  }
  
  // Concatenate chunks into single Uint8Array
  const chunksAll = new Uint8Array(loaded);
  let position = 0;
  for (let chunk of chunks) {
    chunksAll.set(chunk, position);
    position += chunk.length;
  }
  
  return chunksAll;
}

// Stream text data line by line
async function streamText(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    
    const text = decoder.decode(value, { "stream": true });
    console.log("Chunk:", text);
  }
}

// Request deduplication
const requestCache = new Map();

async function fetchOnce(url) {
  if (requestCache.has(url)) {
    return requestCache.get(url);
  }
  
  const promise = fetch(url).then((r) => r.json());
  requestCache.set(url, promise);
  
  try {
    return await promise;
  } catch (error) {
    requestCache.delete(url); // Remove failed request
    throw error;
  }
}

// Retry with exponential backoff
async function fetchWithRetry(url, options = {}, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url, options);
      if (!response.ok && i < maxRetries - 1) {
        throw new Error(`HTTP ${response.status}`);
      }
      return response;
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      
      const delay = Math.pow(2, i) * 1000; // 1s, 2s, 4s
      await new Promise((resolve) => setTimeout(resolve, delay));
    }
  }
}

// Parallel requests with Promise.all
async function fetchMultiple(urls) {
  const promises = urls.map((url) => 
    fetch(url).then((r) => r.json())
  );
  return Promise.all(promises);
}

// Race condition - first to respond wins
async function fetchFastest(urls) {
  const promises = urls.map((url) => 
    fetch(url).then((r) => r.json())
  );
  return Promise.race(promises);
}

// GET request
const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/users", true);

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log("Success:", data);
  } else {
    console.error("Error:", xhr.status);
  }
};

xhr.onerror = function() {
  console.error("Network error");
};

xhr.send();

// POST request with JSON
const xhr2 = new XMLHttpRequest();
xhr2.open("POST", "/api/users", true);
xhr2.setRequestHeader("Content-Type", "application/json");

xhr2.onreadystatechange = function() {
  if (xhr2.readyState === 4) { // DONE
    if (xhr2.status === 201) {
      console.log("Created:", JSON.parse(xhr2.responseText));
    }
  }
};

xhr2.send(JSON.stringify({ "name": "John" }));

// Upload with progress
const formData = new FormData();
formData.append("file", file);

const xhr3 = new XMLHttpRequest();
xhr3.upload.addEventListener("progress", (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log(`Upload: ${percent.toFixed(2)}%`);
  }
});

xhr3.open("POST", "/api/upload", true);
xhr3.send(formData);

// Create WebSocket connection
const ws = new WebSocket("wss://example.com/socket");

// Connection opened
ws.addEventListener("open", (event) => {
  console.log("Connected to server");
  ws.send("Hello Server!");
});

// Listen for messages
ws.addEventListener("message", (event) => {
  console.log("Message from server:", event.data);
  
  // Handle different data types
  if (typeof event.data === "string") {
    const message = JSON.parse(event.data);
    handleMessage(message);
  } else if (event.data instanceof Blob) {
    // Handle binary data
    event.data.text().then((text) => console.log(text));
  }
});

// Handle errors
ws.addEventListener("error", (event) => {
  console.error("WebSocket error:", event);
});

// Connection closed
ws.addEventListener("close", (event) => {
  console.log("Connection closed:", event.code, event.reason);
  if (event.wasClean) {
    console.log("Clean close");
  } else {
    console.log("Connection died");
  }
});

// Send different data types
ws.send("Text message");
ws.send(JSON.stringify({ "type": "chat", "message": "Hello" }));
ws.send(new Blob(["binary data"]));
ws.send(new Uint8Array([1, 2, 3, 4]));

// Close connection gracefully
ws.close(1000, "Normal closure");

class WebSocketClient {
  constructor(url) {
    this.url = url;
    this.reconnectInterval = 1000;
    this.maxReconnectInterval = 30000;
    this.reconnectDecay = 1.5;
    this.connect();
  }
  
  connect() {
    this.ws = new WebSocket(this.url);
    
    this.ws.onopen = () => {
      console.log("WebSocket connected");
      this.reconnectInterval = 1000; // Reset on successful connection
    };
    
    this.ws.onmessage = (event) => {
      this.handleMessage(JSON.parse(event.data));
    };
    
    this.ws.onerror = (error) => {
      console.error("WebSocket error:", error);
    };
    
    this.ws.onclose = (event) => {
      console.log("WebSocket closed:", event.code);
      this.reconnect();
    };
  }
  
  reconnect() {
    console.log(`Reconnecting in ${this.reconnectInterval}ms...`);
    setTimeout(() => {
      this.connect();
      this.reconnectInterval = Math.min(
        this.reconnectInterval * this.reconnectDecay,
        this.maxReconnectInterval
      );
    }, this.reconnectInterval);
  }
  
  send(data) {
    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(data));
    } else {
      console.warn("WebSocket not ready");
    }
  }
  
  handleMessage(data) {
    console.log("Received:", data);
  }
  
  close() {
    this.ws.close(1000, "Client closing");
  }
}

// Usage
const client = new WebSocketClient("wss://example.com/socket");
client.send({ "type": "subscribe", "channel": "updates" });

// Create EventSource connection
const eventSource = new EventSource("/api/events");

// Connection opened
eventSource.addEventListener("open", () => {
  console.log("SSE connection opened");
});

// Receive messages
eventSource.addEventListener("message", (event) => {
  console.log("Message:", event.data);
  const data = JSON.parse(event.data);
  updateUI(data);
});

// Custom named events from server
eventSource.addEventListener("notification", (event) => {
  const notification = JSON.parse(event.data);
  showNotification(notification);
});

eventSource.addEventListener("update", (event) => {
  const update = JSON.parse(event.data);
  console.log("Update received:", update);
});

// Handle errors
eventSource.addEventListener("error", (event) => {
  console.error("SSE error");
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log("Connection closed");
  }
});

// Close connection when done
// eventSource.close();

// Server sends events in this format:
// event: eventName
// data: JSON data
// id: unique id (optional)
// retry: milliseconds (optional)
// (blank line)

// Node.js server example
app.get("/api/events", (req, res) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");
  
  // Send message without event name (uses 'message' event)
  res.write("data: " + JSON.stringify({ "message": "Hello" }) + "\n\n");
  
  // Send named event
  res.write("event: notification\n");
  res.write("data: " + JSON.stringify({ "title": "New message" }) + "\n");
  res.write("id: 123\n");
  res.write("\n");
  
  // Send periodic updates
  const interval = setInterval(() => {
    res.write(`event: update\n`);
    res.write(`data: ${JSON.stringify({ "time": Date.now() })}\n\n`);
  }, 1000);
  
  req.on("close", () => {
    clearInterval(interval);
    res.end();
  });
});

// Track page unload
window.addEventListener("beforeunload", () => {
  const data = JSON.stringify({
    "event": "page_exit",
    "timestamp": Date.now(),
    "duration": performance.now()
  });
  
  const blob = new Blob([data], { "type": "application/json" });
  const queued = navigator.sendBeacon("/api/analytics", blob);
  
  if (!queued) {
    console.warn("Beacon not queued - data limit exceeded");
  }
});

// Track user actions
function trackEvent(eventName, properties) {
  const data = new URLSearchParams({
    "event": eventName,
    "timestamp": Date.now(),
    ...properties
  });
  
  navigator.sendBeacon("/api/track", data);
}

// Usage
trackEvent("button_click", { "button": "submit", "page": "/checkout" });

// Track errors
window.addEventListener("error", (event) => {
  const errorData = new FormData();
  errorData.append("message", event.message);
  errorData.append("filename", event.filename);
  errorData.append("lineno", event.lineno);
  errorData.append("colno", event.colno);
  
  navigator.sendBeacon("/api/errors", errorData);
});

// Track visibility changes
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    const sessionData = JSON.stringify({
      "sessionId": sessionStorage.getItem("sessionId"),
      "duration": performance.now(),
      "interactionCount": getInteractionCount()
    });
    
    navigator.sendBeacon(
      "/api/session-end",
      new Blob([sessionData], { "type": "application/json" })
    );
  }
});