Lab: Fetch API Data

ใน lab นี้คุณจะดึงข้อมูลจาก public API จริง แล้วจัดการทั้ง success และ error cases

โจทย์

Fetch users

เขียน async function getUsers() ที่ดึงข้อมูลจาก https://jsonplaceholder.typicode.com/users แล้ว return array ของ users โดยต้องเช็ค response.ok
Fetch user by ID พร้อม error handling

เขียน getUserById(id) ที่:
- ดึงข้อมูลจาก /users/${id}
- throw Error ถ้า response ไม่ ok
- ใช้ try/catch เมื่อเรียกใช้ function
Fetch หลาย resources พร้อมกัน

ใช้ Promise.all ดึง users และ posts พร้อมกัน แล้ว log จำนวนของแต่ละอัน
สร้าง resilient fetcher

เขียน safeFetch(url) ที่:
- ดึงข้อมูลจาก url ที่ให้มา
- ถ้า error ให้ return { data: null, error: error.message }
- ถ้าสำเร็จ ให้ return { data: ..., error: null }

Solution

Show Solution

Step 1: Fetch users

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

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

  return await response.json();
}

// เรียกใช้
const users = await getUsers();
console.log(`Total users: ${users.length}`); // 10
console.log(users.map(u => u.name));

Step 2: getUserById

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

  if (!response.ok) {
    throw new Error(`User #${id} not found (HTTP ${response.status})`);
  }

  return await response.json();
}

// ใช้กับ try/catch
try {
  const user = await getUserById(1);
  console.log(`Found: ${user.name} (${user.email})`);
} catch (error) {
  console.error("Error:", error.message);
}

// ทดสอบกับ ID ที่ไม่มี
try {
  const user = await getUserById(999);
} catch (error) {
  console.error("Error:", error.message);
}

Step 3: Promise.all

const [allUsers, allPosts] = await Promise.all([
  fetch("https://jsonplaceholder.typicode.com/users").then(r => r.json()),
  fetch("https://jsonplaceholder.typicode.com/posts").then(r => r.json()),
]);

console.log(`Users: ${allUsers.length}`);  // 10
console.log(`Posts: ${allPosts.length}`);   // 100

Step 4: safeFetch

async function safeFetch(url) {
  try {
    const response = await fetch(url);

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

    const data = await response.json();
    return { data, error: null };
  } catch (error) {
    return { data: null, error: error.message };
  }
}

// ทดสอบ success
const result1 = await safeFetch("https://jsonplaceholder.typicode.com/users/1");
console.log(result1); // { data: { id: 1, ... }, error: null }

// ทดสอบ failure
const result2 = await safeFetch("https://invalid-url.example.com");
console.log(result2); // { data: null, error: "..." }