fetch() and the Request/Response Cycle

What is fetch()?

fetch() is a global browser function that sends an HTTP request and returns a Promise that resolves to a Response object.

fetch('https://jsonplaceholder.typicode.com/users/1');
// returns a Promise<Response>

jsonplaceholder.typicode.com is a free fake API used for practice. It returns realistic-looking JSON data and requires no sign-up or API key — you'll use it throughout this section.

The two-step response pattern

Here's the part that trips people up. When the Promise from fetch() resolves, you don't immediately have your data. You have a Response object — a wrapper that represents the HTTP response.

To get the actual data out of it, you need to call .json() on the response. And .json() is also async — it returns another Promise.

This means every basic fetch() call has two .then() steps:

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then((response) => response.json())   // Step 1: parse the body
  .then((data) => {                       // Step 2: use the data
    console.log(data);
  })
  .catch((error) => {
    console.error('Something went wrong:', error);
  });

Why two steps? The browser receives the HTTP response in a stream. The headers arrive first — before the body is fully downloaded. The first .then() fires when the headers arrive. .json() then reads the rest of the stream and parses it. It's efficient, but it does mean you always need both steps.

Reading the Response object

Before you parse the body, the Response object gives you useful information about what came back from the server.

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then((response) => {
    console.log(response.status);     // 200
    console.log(response.ok);         // true (status 200–299)
    console.log(response.statusText); // 'OK'
    return response.json();
  })
  .then((data) => console.log(data));

The most important property is response.ok — a boolean that's true when the status code is in the 200–299 range (success) and false for anything else (404, 500, etc.).

Handling errors properly

This is the most common mistake beginners make with fetch():

fetch() does not reject on HTTP errors.

If the server returns a 404 or 500, the Promise still resolves — because the network request itself succeeded. You get a Response object with ok: false, but no error is thrown.

Your .catch() only fires for genuine network failures — no internet connection, DNS failure, request blocked by CORS, and so on.

To handle HTTP errors correctly, check response.ok in the first .then() and throw an error manually if needed:

fetch('https://jsonplaceholder.typicode.com/users/999')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error.message);
  });

By throwing inside .then(), you force the error into the .catch() handler — keeping all your error handling in one place.

A complete, realistic example

Here's a function that fetches a list of posts and logs their titles. It follows the full pattern: two steps, response.ok check, and proper error handling.

function loadPosts() {
  fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
    .then((response) => {
      if (!response.ok) {
        throw new Error(`Failed to load posts: ${response.status}`);
      }
      return response.json();
    })
    .then((posts) => {
      posts.forEach((post) => {
        console.log(`[${post.id}] ${post.title}`);
      });
    })
    .catch((error) => {
      console.error('Error:', error.message);
    });
}

loadPosts();

The ?_limit=5 query parameter tells JSONPlaceholder to return only five posts. Most real APIs use similar query parameters for filtering and pagination.

Returning data from a fetch function

You'll often want a reusable function that returns data rather than logging it. To do that, return the entire Promise chain:

function getUser(id) {
  return fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`User not found: ${response.status}`);
      }
      return response.json();
    });
}

// Now the caller decides what to do with the data
getUser(1)
  .then((user) => console.log(user.name))
  .catch((error) => console.error(error.message));

Notice there's no .catch() inside getUser — the function returns the Promise and lets the caller handle errors. This is a clean pattern: fetch functions fetch and parse, calling code decides what to do.

What about POST requests?

fetch() defaults to a GET request. To send data to a server — creating a new resource — you pass a second argument with the request options:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'My new post',
    body: 'Post content here',
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

This tutorial focuses on GET requests because that's where you'll start when consuming data. POST, PUT, and DELETE follow the same pattern — just with different method values and a body.