Mission 1: async/await & fetch()

เป้าหมายของ Mission นี้: เข้าใจ async/await, fetch(), และการแปลง JSON

ภาพรวมการดึงข้อมูล

sequenceDiagram
    participant C as Component (เว็บของเรา)
    participant A as Mock API (jsonplaceholder)
    C->>A: fetch(url)
    Note over C: กำลังรอ... (await)
    A-->>C: ส่งข้อมูลกลับมาเป็น JSON
    C->>C: setState(data) แล้ววาดหน้าจอใหม่

Mock API คืออะไร

Mock API คือเซิร์ฟเวอร์ปลอมที่มีข้อมูลตัวอย่างให้ดึงมาเล่นได้จริง โดยที่เรายังไม่ต้องมี Backend ของตัวเอง — ใน Mission นี้เราใช้ jsonplaceholder.typicode.com ซึ่งเป็น Mock API สาธารณะที่นักพัฒนาทั่วโลกใช้ฝึกกัน ไม่ต้องสมัคร ไม่ต้องมี API key

async/await คืออะไร

การดึงข้อมูลจากอินเทอร์เน็ตใช้ "เวลา" (รอเซิร์ฟเวอร์ตอบกลับ) — async/await คือวิธีเขียนโค้ด ให้ "รอ" ผลลัพธ์ก่อนแล้วค่อยทำบรรทัดถัดไป โดยไม่ต้องหยุดทั้งหน้าเว็บรอ

async function getData() {
  const result = await fetch("https://example.com/data"); // รอจนกว่าจะได้คำตอบ
  console.log("มาถึงตรงนี้แปลว่ารอเสร็จแล้ว");
}

fetch() + JSON

fetch(url) คือฟังก์ชันสำหรับขอข้อมูลจาก URL หนึ่ง — ผลลัพธ์ที่ได้ต้องแปลงเป็น JSON อีกที ด้วย .json() (ก็เป็น async เหมือนกัน ต้อง await อีกรอบ)

async function getData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data); // { id: 1, title: "...", body: "..." }
}

ใช้ fetch คู่กับ useEffect

useEffect คือ Hook ที่รันโค้ดข้างในตอน component แสดงผลครั้งแรก — เหมาะกับการดึงข้อมูลตอน เปิดหน้า

"use client";
import { useState, useEffect } from "react";

export function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function loadPosts() {
      const response = await fetch("https://jsonplaceholder.typicode.com/posts");
      const data = await response.json();
      setPosts(data);
    }
    loadPosts();
  }, []); // [] ว่างๆ = รันแค่ครั้งเดียวตอนเปิดหน้า

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

คำศัพท์สำคัญ

ลองเล่นในเวิร์กสเปซด้านล่าง

โค้ดตัวอย่างในเวิร์กสเปซด้านล่างยิง fetch ไปที่ jsonplaceholder จริงๆ ดูผลลัพธ์ได้ทันทีใน Live Preview — ลองแก้ posts/1 เป็น posts/2 หรือเลขอื่นดูว่าข้อมูลเปลี่ยนไหม (โค้ดแบบเดียวกันนี้ เอาไปใช้ในโปรเจค Next.js จริงได้เลย)