Fetch API — Load Data from Servers

📚 Lesson 23 of 40  •  ⏱ 14 min read  •  Intermediate

What is Fetch?

The Fetch API lets JavaScript request data from a server without reloading the page. This is how websites update parts of the page dynamically — like loading more posts, checking results, or submitting forms silently.

Basic GET Request

JavaScript 
// Using async/await (recommended)
async function getData() {
  try {
    const response = await fetch("https://api.example.com/users");

    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }

    const data = await response.json();  // parse JSON
    console.log(data);
  } catch (error) {
    console.log("Error:", error);
  }
}

getData();

Real Example: Load GitHub User Data

JavaScript 
async function loadUser(username) {
  const res  = await fetch(`https://api.github.com/users/${username}`);
  const user = await res.json();

  document.querySelector("#name").textContent    = user.name;
  document.querySelector("#avatar").src         = user.avatar_url;
  document.querySelector("#followers").textContent = user.followers;
}

loadUser("torvalds");  // loads Linus Torvalds' profile

POST Request — Send Data

JavaScript 
async function submitForm(formData) {
  const response = await fetch("/api/contact", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(formData)  // object → JSON string
  });

  const result = await response.json();
  console.log(result);
}

submitForm({ name: "Mohan", email: "m@email.com", message: "Hello!" });

Complete: Fetch + Display in DOM

JavaScript 
async function loadPosts() {
  const list = document.querySelector("#posts");
  list.innerHTML = "<p>Loading...</p>";

  try {
    const res   = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5");
    const posts = await res.json();

    list.innerHTML = posts.map(post => `
      <article>
        <h3>${post.title}</h3>
        <p>${post.body}</p>
      </article>
    `).join("");
  } catch (e) {
    list.innerHTML = "<p>Failed to load. Try again.</p>";
  }
}

loadPosts();
← Async / Await Next: Project — Calculator →