28. JavaScript Fetch API

What you will learn

• How to request data with fetch()
• How to check the response and read JSON
• How to send data with POST
• How to handle errors, and what CORS is

What is fetch?

fetch() asks a server for data without reloading the page. It returns a promise that resolves to a response. This is how pages load fresh data, submit forms in the background, and talk to APIs.

A basic request

async function loadLesson() {
  const response = await fetch("https://example.com/api/lesson/1");
  const data = await response.json();
  console.log(data.title);
}

loadLesson();

Two awaits, because two things take time: first the response arrives, then its body is read and turned into an object.

Always check response.ok

Important: fetch() only rejects when the network itself fails. A “404 Not Found” or “500 Server Error” still counts as a successful fetch. You must check it yourself.

async function loadLesson(id) {
  try {
    const response = await fetch(`https://example.com/api/lesson/${id}`);

    if (!response.ok) {
      throw new Error("Server answered " + response.status);
    }

    const data = await response.json();
    document.getElementById("title").textContent = data.title;
  } catch (error) {
    document.getElementById("title").textContent = "Sorry, the lesson could not be loaded.";
    console.error(error);
  }
}

Sending data with POST

Pass a second argument describing the request. To send JSON, set the method, a header, and a stringified body.

async function sendMessage(name, message) {
  const response = await fetch("https://example.com/api/messages", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: name, message: message })
  });

  if (!response.ok) {
    throw new Error("Could not send: " + response.status);
  }

  return response.json();
}

Practise with a pretend fetch

This example fakes a server with a promise, so the same await, ok, and json() steps run right here. Press Try it Yourself, then change the address to /api/missing to see the error path.

<p id="demo">Loading...</p>

<script>
  // A pretend server: no real network is used
  function fakeFetch(url) {
    return new Promise(function (resolve) {
      setTimeout(function () {
        if (url === "/api/lesson") {
          resolve({
            ok: true,
            status: 200,
            json: function () { return Promise.resolve({ title: "JavaScript Fetch API", order: 28 }); }
          });
        } else {
          resolve({
            ok: false,
            status: 404,
            json: function () { return Promise.resolve({}); }
          });
        }
      }, 700);
    });
  }

  async function loadLesson(url) {
    const out = document.getElementById("demo");
    try {
      const response = await fakeFetch(url);
      if (!response.ok) {
        throw new Error("Server answered " + response.status);
      }
      const data = await response.json();
      out.textContent = "Loaded: " + data.title + " (lesson " + data.order + ")";
    } catch (error) {
      out.textContent = "Sorry, that could not be loaded. " + error.message;
    }
  }

  loadLesson("/api/lesson");
</script>

Showing loaded data safely

Data from a server can contain anything. Put text on the page with textContent or createElement, never innerHTML, unless you fully trust and control the source.

Loading states

Network requests take time and sometimes fail. Good pages show a “Loading…” message first, clear it when done, and show a helpful message on failure. The finally block is a good place to remove the loading message.

CORS: why some requests fail

For safety, a browser only lets your page read a response from another website if that site allows it. The rule is called CORS (Cross-Origin Resource Sharing). If you see a CORS error in the console, the server you are calling has not given permission to your site. You cannot fix that from your JavaScript. The server owner must allow it, or you call the service from your own server.

Keep secrets out of the browser

Other useful options

• AbortController cancels a request, for example after a timeout.
• Add query strings with new URLSearchParams({ q: "html" }), which also encodes special characters.
• Check the Network tab in the browser’s developer tools (F12) to see every request, its status, and its response.

Common mistakes

• Not checking response.ok.
• Forgetting await before response.json().
• Forgetting JSON.stringify and the Content-Type header on POST.
• Putting server data into innerHTML.
• Storing secret keys in front-end code.
• Not handling failures, so visitors see a blank page.

async function showUser(url) {
  const out = document.getElementById("demo");
  try {
    const response = await fakeFetch(url);
    if (!response.ok) {
      throw new Error("Not found (" + response.status + ")");
    }
    const data = await response.json();
    out.textContent = "User: " + data.name;
  } catch (error) {
    out.textContent = error.message;
  }
}

showUser("/api/user");

Summary

• fetch() returns a promise of a response. Check response.ok, then read it with json().
• Send data with method, headers, and a stringified body.
• Handle errors and CORS limits, show data safely, and never expose secrets.