Day 18

Fetch API & REST APIs

16 min
JavaScript 100 Days

APIs se data lena modern web development ka core hai. Weather apps, social media, e-commerce — sab APIs par kaam karte hain. Fetch API se yeh kaam karte hain.

GET Request — Data Fetch karo

fetch() se GET request bhejo aur data receive karo.

fetch-get.js
javascript
// Free test API
async function getUsers() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/users");
    let users = await response.json();

    users.forEach(user => {
      console.log(`${user.name} — ${user.email}`);
    });
  } catch (error) {
    console.error("Error:", error);
  }
}

getUsers();

// Single user
async function getUser(id) {
  let res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  let user = await res.json();
  return user;
}

POST Request — Data Send karo

Server par data bhejna POST request se.

fetch-post.js
javascript
async function createPost(data) {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });

    let result = await response.json();
    console.log("Created:", result);
    return result;

  } catch (error) {
    console.error("Failed:", error);
  }
}

createPost({
  title: "My First Post",
  body: "Hello from CodingSkillUp!",
  userId: 1
});

🎯 Practice Challenge

Weather API (openweathermap.org — free tier) se apne city ka weather fetch karo aur temperature, description display karo.