JavaScript curriculum

Fetch and APIs

Get data from a server with fetch, read JSON, and handle errors and loading states.

Lesson 11 of 130% of the track complete

What you'll learn

How to request data with fetch, turn the response into a JavaScript object with .json(), check for errors, and send data with POST.

Why it matters

Most apps show data that lives on a server: posts, products, weather. An API (Application Programming Interface) is the doorway a server opens so your code can ask for that data. fetch is how the browser walks through it.

Explanation

fetch(url) starts a request and returns a promise for a Response object. Then response.json() returns another promise with the parsed data.

Important details:

fetch only rejects on network failure. A server error such as 404 or 500 still gives you a response. Check response.ok (true for status 200 to 299) and handle it yourself.
JSON is the common data format: text that looks like a JavaScript object. JSON.parse and JSON.stringify convert between text and objects.
To send data, pass options: method: "POST", a headers object with "Content-Type": "application/json", and a body of JSON.stringify(data).
Show a loading state while waiting and an error state if it fails.

Example

Step-by-step walkthrough

We build a small JSON text and wrap it in a data: URL so there is something to fetch without a network.
loadUsers prints loading..., then awaits the response.
We check response.ok. A bad status would throw and be caught below.
response.json() turns the text into an array of objects.
The loop prints 1 Asha (active) and 2 Ravi (inactive).
try / catch makes sure any failure prints an error instead of crashing.

For a real POST request you would write:

Try it yourself

Add a third user to the JSON text, then print only the active users with .filter().

Fetch JSONJavaScript

Ctrl+Enter to run

Common mistakes

Assuming a 404 throws. Check response.ok.
Forgetting await response.json(), so you get a promise instead of data.
No loading or error state in the interface.
Missing the JSON header and stringify when sending data.

Quick quiz

Question 1 of 3

When does fetch reject its promise?

On a network failureOn any 4xx or 5xx statusNever

Question 2 of 3

What does response.json() do?

Parses the body into a JavaScript value, returning a promiseSends JSON to the serverChecks the status code

Question 3 of 3

What do you need to send an object in a POST request?

JSON.stringify for the body and a JSON content type headerNothing extraA form element

Summary

fetch returns a promise for a response; .json() gets the data.
Always check response.ok and handle errors.
POST needs a method, a JSON header and a stringified body.

Next: modern JavaScript features that make code shorter.

JavaScript

const json = JSON.stringify([
  { id: 1, name: "Asha", active: true },
  { id: 2, name: "Ravi", active: false },
]);
const url = "data:application/json," + encodeURIComponent(json);

async function loadUsers() {
  try {
    console.log("loading...");
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("Request failed: " + response.status);
    }
    const users = await response.json();
    for (const u of users) {
      console.log(u.id, u.name, u.active ? "(active)" : "(inactive)");
    }
  } catch (err) {
    console.log("error:", err.message);
  }
}

loadUsers();