JavaScript Fetch API – Making HTTP Requests

// Basic GET with .then() chain
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())  // parse JSON body
  .then(data => console.log(data))
  .catch(error => console.error('Network error:', error));

// The same with async/await (cleaner)
async function getPost(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const post = await response.json();
  console.log(post);
  return post;
}

getPost(1);

async function inspectResponse() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');

  // Status info
  console.log(response.status);     // 200, 404, 500, etc.
  console.log(response.statusText); // "OK", "Not Found", etc.
  console.log(response.ok);         // true for 200–299
  console.log(response.url);        // final URL (after redirects)
  console.log(response.redirected); // true if URL changed

  // Headers
  console.log(response.headers.get('Content-Type'));
  // "application/json; charset=utf-8"

  // Body parsing methods (each returns a Promise, use only ONE per response)
  const json   = await response.json();    // parses JSON
  // const text = await response.text();  // raw string
  // const blob = await response.blob();  // binary data (images, files)
  // const buf  = await response.arrayBuffer(); // binary buffer
  // const form = await response.formData();    // multipart form data
}

async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);

    // Must check response.ok for HTTP errors
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
    }

    const user = await response.json();
    return user;

  } catch (error) {
    if (error.name === 'TypeError') {
      // Network failure (no internet, DNS fail, CORS block)
      console.error('Network error — are you offline?');
    } else {
      // HTTP error or JSON parse error
      console.error('Request failed:', error.message);
    }
    return null;
  }
}

// Usage
const user = await fetchUser(42);
if (user) renderUser(user);

async function createPost(postData) {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer my-token-here'
    },
    body: JSON.stringify(postData)
  });

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

  const created = await response.json();
  console.log('Created post with ID:', created.id);
  return created;
}

createPost({
  title: 'Hello Fetch',
  body: 'Learning the Fetch API',
  userId: 1
});

// PUT, PATCH, DELETE follow the same pattern
async function deletePost(id) {
  const response = await fetch(`/api/posts/${id}`, { method: 'DELETE' });
  if (response.status !== 204 && !response.ok) {
    throw new Error('Delete failed');
  }
  console.log('Deleted post', id);
}

let currentController = null;

async function search(query) {
  // Cancel any in-flight request from previous call
  if (currentController) currentController.abort();

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

  try {
    const response = await fetch(
      `https://api.example.com/search?q=${encodeURIComponent(query)}`,
      { signal }
    );

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

    const results = await response.json();
    displayResults(results);

  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Request was cancelled (new search started)');
    } else {
      console.error('Search failed:', error.message);
    }
  }
}

// Timeout pattern using AbortController
async function fetchWithTimeout(url, ms = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), ms);

  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    return await response.json();
  } catch (e) {
    if (e.name === 'AbortError') throw new Error(`Request timed out after ${ms}ms`);
    throw e;
  }
}