🌐 Connect Backend (Fetching Data)

เมื่อเรามี Backend API (Laravel) และ Frontend ที่สวยงาม (React) แล้ว งานสุดท้ายคือการเชื่อมต่อมันเข้าด้วยกัน

---

1. วิธีดึงข้อมูล (Fetch API)

Browser สมัยใหม่มี fetch() มาให้ในตัว แต่เพื่อให้ง่าย เรามักใช้ Async/Await

ตัวอย่าง: ดึงรายการสินค้าจาก API

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  // 1. สร้าง Async Function
  const fetchProducts = async () => {
    try {
      // เรียก API (สมมติว่า backend รันที่ port 8000)
      const response = await fetch('http://localhost:8000/api/products');
      
      // แปลงข้อมูลเป็น JSON
      const data = await response.json();
      
      // เก็บลง State
      setProducts(data);
    } catch (error) {
      console.error("เกิดข้อผิดพลาด:", error);
    } finally {
      setLoading(false); // ปิดการโหลดไม่ว่าจะสำเร็จหรือพัง
    }
  };

  // 2. เรียกใช้ตอนเข้าหน้าเว็บครั้งแรก
  useEffect(() => {
    fetchProducts();
  }, []); // [] สำคัญมาก! เพื่อให้ทำครั้งเดียว

  // 3. แสดงผลหน้าจอ
  if (loading) return <p>กำลังโหลด...</p>;

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} - {product.price} บาท
        </li>
      ))}
    </ul>
  );
}

---

2. ปัญหา CORS (Cross-Origin Resource Sharing)

เมื่อ Frontend (Port 5173) พยายามคุยกับ Backend (Port 8000) Browser จะมองว่าเป็นคนละแหล่งที่มา (Origin) และบล็อกการทำงานเพื่อความปลอดภัย

วิธีแก้ใน Laravel

เราต้องบอก Laravel ว่า "อนุญาตให้ Frontend นี้เข้ามาได้นะ"

แก้ไขไฟล์ backend/config/cors.php:

'paths' => ['api/*', 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'], // อนุญาตทุก Method (GET, POST, PUT, DELETE)

'allowed_origins' => ['http://localhost:5173'], // ใส่ URL ของ React เรา

// หรือถ้าขี้เกียจ (ไม่แนะนำสำหรับ Production)
// 'allowed_origins' => ['*'],

---

3. การส่งข้อมูลกลับ (POST Method)

ตัวอย่างการทำฟอร์มเพิ่มสินค้า

const handleSubmit = async (e) => {
  e.preventDefault(); // ป้องกันหน้าเว็บรีเฟรช

  const response = await fetch('http://localhost:8000/api/products', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json', // บอก Server ว่าส่ง JSON นะ
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      name: "สินค้าใหม่",
      price: 999
    })
  });

  if (response.ok) {
    alert("บันทึกสำเร็จ!");
    fetchProducts(); // ดึงข้อมูลใหม่
  } else {
    alert("บันทึกไม่สำเร็จ");
  }
};

ใช้ Library อะไรดี?

ในโปรเจกต์จริง เรามักใช้ Axios หรือ React Query (TanStack Query) เพราะจัดการ Error และ Caching ได้ดีกว่า fetch ธรรมดา แต่สำหรับหลักสูตรนี้ fetch ก็เพียงพอ