JavaScript Fetch API

In the previous lesson, we learned how async and await make asynchronous code read like normal step-by-step code. Now let’s put that to work with the Fetch API, the built-in way to request data from a server.

🌐 What is the Fetch API?

The Fetch API lets your code make an HTTP request to get data from a server or an API. The fetch() function takes a URL and returns a promise, so it fits the async/await pattern from the last lesson.

A server is a computer that holds data and sends it back when you ask for it. An API is the address and rules you follow to ask for that data.

fetch("https://api.example.com/users"); // returns a promise

This one line calls fetch() with the URL we want to request, and fetch() hands back a promise instead of the data itself.

Because fetch() returns a promise, the result is not ready right away. You use await to pause until the server responds.

🔁 The Two-Step Pattern

Getting data with fetch takes two awaits. The first gets the response, and the second reads the data out of it.

const response = await fetch("https://api.example.com/users"); // ✅ step 1: get the response
const data = await response.json(); // ✅ step 2: read the JSON body

Let’s walk through what each line does:

• const response = await fetch(...) sends the request and waits for the server’s reply, giving us a Response object that describes the reply but does not contain the data yet.
• const data = await response.json() reads the body of that response and turns the JSON text into a JavaScript object or array we can use.

JSON stands for JavaScript Object Notation. It is a text format for sending data, and response.json() parses that text into values you can use.

📥 A GET Request with async/await

The most common request is a GET request, which asks the server for data. This function fetches a list of users from a public API and returns it.

async function getUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  return users;
}

const users = await getUsers();
console.log(users[0].name); // the name of the first user

Here is what each step does:

• async function getUsers() marks the function as asynchronous so we can use await inside it.
• await fetch(...) pauses until the server replies and stores the Response object in response.
• await response.json() parses the body into a real array and stores it in users.
• return users hands that array back to the caller.
• await getUsers() runs the function and waits for the array, then console.log(users[0].name) prints the name of the first user.

✅ Checking response.ok

A request can reach the server but still fail, for example when a page is not found. The response.ok property is true only when the status code is in the 200 range, so you check it before reading the data.

async function getUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);

  if (!response.ok) {
    throw new Error(`Request failed with status ${response.status}`);
  }

  return await response.json();
}

Let’s read this line by line:

• await fetch(...) builds the URL with the id and waits for the server’s reply.
• if (!response.ok) checks whether the request actually succeeded; response.status holds the numeric HTTP code, such as 200 for success or 404 for not found.
• throw new Error(...) stops the function with a clear message when the request failed, so you handle the problem instead of working with bad data.
• return await response.json() runs only when the response is good, parsing and returning the data.

📤 Sending Data with POST

A GET request reads data, while a POST request sends data to the server. You pass a second argument to fetch that sets the method, headers, and body.

const response = await fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alex", email: "alex@example.com" }),
});

const created = await response.json();

The second argument is an options object, and each field tells fetch how to send the request:

• method: "POST" says what kind of request to make.
• headers: { "Content-Type": "application/json" } tells the server you are sending JSON.
• body: JSON.stringify(...) is the data itself, with JSON.stringify turning your object into the JSON text the server expects.
• await response.json() reads the server’s reply, which here is the record it created.

🛠️ Fetch and Display Data

This example fetches a single post and shows its title on the page. It ties the steps together: request, check, read, then use the data.

async function showPostTitle() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");

  if (!response.ok) {
    throw new Error(`Request failed with status ${response.status}`);
  }

  const post = await response.json();
  document.querySelector("#title").textContent = post.title;
}

showPostTitle();

Here is how the pieces fit together:

• await fetch(...) requests the post and waits for the reply.
• if (!response.ok) confirms the request succeeded before going further.
• const post = await response.json() reads the JSON into a post object.
• document.querySelector("#title").textContent = post.title writes the title into the element with the id title.
• showPostTitle() calls the function so the whole sequence runs.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ fetch(url) makes an HTTP request and returns a promise
• ✅ The two-step pattern is await fetch(url) then await response.json()
• ✅ response.ok tells you whether the request actually succeeded
• ✅ fetch only rejects on network failure, not on 404 or 500
• ✅ A POST request sends data with method, headers, and body

🚀 What’s Next?

Now that you can request data, we will learn how to handle the things that can go wrong. Let’s continue to Error Handling.