جلب البيانات عند التحميل

نمط جلب البيانات

مثال كامل

interface User { id: number; name: string; email: string; }

function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/users')
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(data => setUsers(data))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <Spinner />;
  if (error)   return <ErrorMessage message={error} />;
  return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}

استخدام async/await في useEffect

useEffect(() => {
  async function fetchUsers() {
    try {
      const res = await fetch('/api/users');
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();
      setUsers(data);
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setLoading(false);
    }
  }

  fetchUsers();
}, []);

التحقق من حالة الاستجابة

const res = await fetch('/api/data');
if (!res.ok) {
  // Could also use res.status for specific handling
  throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();

الجلب عند تغيّر تبعية

const { userId } = useParams();

useEffect(() => {
  if (!userId) return;
  setLoading(true);
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(setUser)
    .finally(() => setLoading(false));
}, [userId]);

طلبات POST في التأثيرات

خطاف useFetch مخصص

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
      .then(setData)
      .catch(e => setError(e.message))
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

تحليل JSON بأمان

تهيئة عنوان URL الأساسي لواجهة API

const API_BASE = import.meta.env.VITE_API_URL;

async function apiFetch<T>(path: string): Promise<T> {
  const res = await fetch(`${API_BASE}${path}`, {
    headers: { 'Authorization': `Bearer ${getToken()}` }
  });
  if (!res.ok) throw new Error(`API error ${res.status}`);
  return res.json();
}

متى تنتقل إلى React Query

عرض هيكل تحميل

تحقق سريع

مراجعة: جلب البيانات في useEffect