🌐 Fetch API Fundamentals

What Is the Fetch API?

The Fetch API is the modern, built-in browser interface for making network requests. Its centerpiece is a single global function — fetch() — that sends an HTTP request and returns a Promise. Because it is promise-based, it plugs directly into the async/await syntax you met earlier in this module, giving you clean, readable code without a tangle of callbacks.

💡 An analogy: Think of fetch() as ordering takeout. You place the order (send the request) and get a receipt immediately (the promise). The receipt is not your food — it's a promise that food is coming. Later the delivery arrives (the response), and only then do you unwrap the bag to see what's actually inside (the body). Fetch works in exactly these two steps.

Fetch replaced an older, clunkier tool called XMLHttpRequest (XHR). Here is the short version of how browser networking evolved:

• Full page reloads — every interaction meant reloading the whole page.
• XMLHttpRequest (2005) — enabled AJAX (updating part of a page without a reload) but used a verbose, callback-heavy API.
• jQuery $.ajax (2006) — smoothed over XHR's rough edges, but required an external library.
• Fetch API (2015) — native, promise-based, and now supported in every modern browser.

Your First Request

The simplest possible use of fetch is a GET request to retrieve some data. Here it is with the classic .then() chain, so you can see every step explicitly:

// A basic GET request
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => {
    // Stage 1: the server has replied with headers + status.
    // fetch does NOT throw on 404/500, so we check ourselves:
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json(); // start reading & parsing the body
  })
  .then((data) => {
    // Stage 2: the body has finished downloading and parsing.
    console.log('Data received:', data);
  })
  .catch((error) => {
    console.error('Fetch failed:', error);
  });

Notice there are two .then() blocks. That is not an accident — it reflects how fetch actually works, which is the single most important idea in this lesson.

The Two-Stage Promise Flow

A fetch call resolves in two separate stages. The first promise resolves as soon as the response headers arrive — before the body has finished downloading. Reading the body (with response.json(), response.text(), and friends) returns a second promise, because the body may still be streaming in.

Once you internalize this, the shape of every fetch you write makes sense: await the response, check it, then await the body.

Fetch with Async/Await

The .then() chain works, but async/await reads like ordinary step-by-step code and makes error handling with try/catch natural. This is the style you should reach for by default:

async function fetchTodo(id) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);

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

    const data = await response.json();
    console.log('Data received:', data);
    return data;
  } catch (error) {
    console.error('Fetch failed:', error);
    throw error; // re-throw so the caller can react too
  }
}

fetchTodo(1);

Read it top to bottom: send the request, wait for the response, verify it succeeded, wait for the body, return the data. The try/catch catches both network failures and the error we throw ourselves on a bad status.

The Big Gotcha: HTTP Errors Don't Reject

This trips up nearly every newcomer, so it deserves its own section. A fetch promise only rejects on a network-level failure — no connection, DNS failure, CORS block, or a request you aborted. An HTTP error status such as 404 Not Found or 500 Internal Server Error is considered a successful round trip: the server was reached and it answered. The promise happily resolves.

// ❌ BUG: a 404 or 500 slips through as if it succeeded
async function brokenGet(url) {
  const response = await fetch(url);
  const data = await response.json(); // may throw on an error page's HTML!
  return data;
}

async function safeGet(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Request failed: ${response.status} ${response.statusText}`);
  }
  return response.json();
}

Reading the Response Body

The Response object can hand you the body in several formats. You pick the method that matches what the server sent. Each returns a promise and — importantly — can only be called once, because the body is a stream that is consumed as you read it.

For example, fetching an image as a Blob and showing it on the page:

async function showImage(url, imgElement) {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`Failed: ${response.status}`);

  const blob = await response.blob();
  const objectUrl = URL.createObjectURL(blob);
  imgElement.src = objectUrl;

  // Free the memory once the browser has loaded it
  imgElement.onload = () => URL.revokeObjectURL(objectUrl);
}

Hands-on Exercise

async function getJSON(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Request to ${url} failed: ${response.status}`);
  }
  return response.json();
}

async function main() {
  try {
    const users = await getJSON('https://jsonplaceholder.typicode.com/users');
    console.log(`Loaded ${users.length} users`);

    // This path 404s -> our check throws -> catch runs
    await getJSON('https://jsonplaceholder.typicode.com/userzzz');
  } catch (error) {
    console.error('Something went wrong:', error.message);
  }
}

main();

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Fetch API
• MDN — Response object
• web.dev — Introduction to Fetch

🚀 What's Next?

You can now make and verify a request. Next we dig into the second argument to fetch — the options object — where you set the HTTP method, headers, body, credentials, and more to control exactly how a request is sent.