JavaScript Fetch API Tutorial — fetch() with Examples

A web page is like a shop. Most of the time it shows what it already has on its shelves. But sometimes it needs something from the back room — the server. In the old days the whole page had to reload to get it. The Fetch API is the waiter: it walks to the server, asks for data, and brings it back — while the page stays exactly where it is. The tool is fetch(), and it returns a Promise (remember the promises lesson).

Diagram — see how it fits together

fetch() — ask, then wait

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(response => response.json())
  .then(user => console.log(user.name));

fetch() takes a URL and returns a promise. The first .then() receives the response — but the response is not the data yet, it is the envelope. response.json() opens the envelope and reads the JSON inside — and that also returns a promise, so a second .then() receives the actual data. JSONPlaceholder is a free practice server that sends back fake user data, perfect for learning.

Showing the data on the page

Data is only useful when the visitor can see it. The pattern is always the same: fetch, then put the values into the page with textContent, then handle the failure with .catch().

fetch(url)
  .then(response => response.json())
  .then(user => {
    document.getElementById("out").textContent = user.name;
  })
  .catch(error => {
    document.getElementById("out").textContent = "Could not load data.";
  });

While the data is travelling, show a "Loading..." message. The visitor then knows something is happening instead of staring at a blank page. When the data arrives, replace "Loading..." with the real values; if the fetch fails, replace it with a friendly error instead of leaving the page silent.

Common mistakes

• Forgetting the second .then() — response.json() is itself a promise; the data is not ready until the second .then().
• Treating a 404 as a failed fetch — fetch only rejects on network errors; check response.ok for HTTP errors.
• Leaving the page blank while waiting — always show "Loading..." first.
• Forgetting the full URL — fetch needs a complete, correct URL, starting with https://.

Remember

• fetch(url) returns a promise that settles with the response.
• response.json() returns another promise that settles with the data.
• Chain .then() for success and .catch() for failure.
• Show "Loading..." while waiting; show a friendly message on failure.
• Fetch asks, .then unwraps, .catch catches.

Example explained

• fetch("https://jsonplaceholder.typicode.com/users/1") — asks the practice server for user number 1. No page reload happens.
• .then(response => response.json()) — the first .then() receives the response envelope and opens it; response.json() returns a promise of the data.
• .then(user => { ... }) — the second .then() receives the user object, with .name and .email inside.
• document.getElementById("out").textContent = "Name: " + user.name + ", Email: " + user.email; — puts the real data on the page.
• .catch(error => { ... }) — if the network fails, a friendly error message is shown instead of leaving the page blank.