The Fetch API: Getting Data from the Web in JavaScript

The Fetch API in JavaScript is the modern, built-in way to make HTTP requests from a browser. No library needed — it’s available in every modern browser and lets you communicate with APIs, load data, and submit forms without reloading the page.

Your First Fetch Request

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

fetch() returns a Promise. The first .then() converts the response to JSON (also a Promise). The second .then() gives you the actual data.

Using fetch with async/await

The same request is much cleaner with async/await:

async function getPost(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const data = await response.json();
  return data;
}

getPost(1).then(post => console.log(post.title));

POST Requests with the Fetch API

Sending data requires a few extra options:

async function createPost(title, body) {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ title, body, userId: 1 })
  });

  const newPost = await response.json();
  return newPost;
}

Error Handling — The Gotcha

fetch() only rejects on network errors — it does not throw for 4xx or 5xx HTTP status codes. You must check response.ok manually:

async function safeGet(url) {
  try {
    const response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error.message);
    return null;
  }
}

This is the most common mistake beginners make with the Fetch API — assuming a failed response throws automatically.

Conclusion

The Fetch API in JavaScript is essential for any frontend developer. GET data with fetch(url), POST data with method: "POST" and a body, always check response.ok, and use async/await for readability. Practice by building a small app that fetches and displays data from a public API like JSONPlaceholder.

Read next: async/await in JavaScript Explained

External resource: MDN — Using Fetch