Advanced

Fetch API

Make HTTP requests from the browser without any library.

1. Explanation

fetch(url, options) returns a Promise that resolves to a Response. Call .json() on the response to read the body. fetch only rejects on network failure — a 404 still resolves, so check response.ok. Pass method, headers and body in options for POST requests.

2. Example

Try it yourself

async function loadUser(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!res.ok) throw new Error("HTTP " + res.status);
  const user = await res.json();
  console.log(user.name, user.email);
}

loadUser(1);

Console

Click Run to see output.

3. Expected output

output

Leanne Graham Sincere@april.biz

4. Common mistakes

✗Forgetting to await response.json()
✗Not checking response.ok for HTTP errors
✗Sending an object as body without JSON.stringify and the right Content-Type

5. Practice questions

Fetch a list of posts and log their titles
POST a new todo to a test API
Handle a network error with try/catch

→ Try more practice problems