Pobieranie danych przy montowaniu
Proszę pobierać JSON z API wewnątrz useEffect, zapisywać odpowiedź w stanie oraz uruchamiać pobieranie tylko raz za pomocą pustej tablicy zależności.
Pobieranie danych przy montowaniu to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Schemat pobierania danych
Standardowy schemat pobierania danych w React: 1) zdefiniuj stan ładowania, błędu i danych, 2) pobieraj dane w useEffect z pustą tablicą zależności [], 3) aktualizuj stan w funkcji zwrotnej, 4) renderuj interfejs na podstawie stanu.
Pełny przykład
Kompletny przykład pobierania użytkowników podczas montowania komponentu z obsługą ładowania i błędów.
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>;
}Używanie async/await w useEffect
Funkcja zwrotna useEffect nie może być bezpośrednio asynchroniczna, ponieważ zwracałaby obiekt Promise, który React zinterpretowałby jako funkcję czyszczącą. Zamiast tego zdefiniuj wewnętrzną funkcję asynchroniczną i natychmiast ją wywołaj.
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();
}, []);Sprawdzanie statusu odpowiedzi
fetch nie zgłasza wyjątków dla błędów HTTP (4xx, 5xx) — robi to tylko w przypadku awarii sieci. Zawsze sprawdzaj response.ok i ręcznie zgłaszaj wyjątek dla odpowiedzi zawierających błąd.
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();Pobieranie po zmianie zależności
Dodaj zależność, na przykład identyfikator z parametrów trasy lub propsów, do tablicy zależności efektu. Efekt uruchomi się ponownie i pobierze aktualne dane za każdym razem, gdy zmieni się zależność.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);Żądania POST w efektach
Efekty mogą również wysyłać żądania POST/PUT/DELETE, ale zwykle są one wywoływane przez zdarzenia, takie jak wysłanie formularza lub kliknięcie przycisku, a nie przez zamontowanie komponentu. Używaj efektów do ładowania danych, a procedur obsługi zdarzeń do modyfikowania danych.
Niestandardowy hook useFetch
Wyodrębnij schemat pobierania danych, obsługi ładowania i błędów do niestandardowego hooka, aby używać go ponownie w różnych komponentach.
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 };
}Bezpieczne analizowanie JSON
Zawsze otaczaj res.json() blokiem try/catch — nieprawidłowy JSON powoduje wyjątek SyntaxError. Zewnętrzny blok catch go obsłuży, ale znajomość źródła ułatwia debugowanie.
Konfiguracja bazowego adresu URL API
Nie wpisuj adresów URL API na stałe w kodzie. Używaj zmiennych środowiskowych (import.meta.env.VITE_API_URL) dla bazowego adresu URL. Utwórz centralny plik api.ts ze skonfigurowanym wrapperem fetch.
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();
}Kiedy przejść na React Query
Ręczne schematy pobierania danych sprawdzają się w prostych przypadkach. Gdy potrzebujesz buforowania, pobierania danych w tle, stronicowania lub modyfikowania danych, przejdź na React Query (TanStack Query) — niezawodnie obsługuje wszystkie te schematy.
Wyświetlanie szkieletu podczas ładowania
Zamiast wskaźnika ładowania wyświetl interfejs szkieletowy odpowiadający kształtem załadowanej treści. Skraca to postrzegany czas ładowania i zapobiega przesuwaniu się układu.
Szybkie sprawdzenie
Dlaczego nie można bezpośrednio oznaczyć funkcji zwrotnej useEffect jako asynchronicznej?
Podsumowanie: pobieranie danych w useEffect
Zdefiniuj stan ładowania, błędu i danych. Pobieraj dane w useEffect z pustą tablicą zależności []. Zdefiniuj wewnętrzną funkcję asynchroniczną — nie oznaczaj funkcji zwrotnej jako asynchronicznej. Zawsze sprawdzaj res.ok. Dodaj adres URL lub identyfikator do zależności w przypadku dynamicznego pobierania danych. Wyodrębnij logikę do niestandardowego hooka useFetch, aby używać jej ponownie. W przypadku produkcyjnego pobierania danych rozważ TanStack Query.
Często zadawane pytania
Czy lekcja „Pobieranie danych przy montowaniu” jest bezpłatna?
Tak — pełny tekst „Pobieranie danych przy montowaniu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pobieranie danych przy montowaniu”?
Proszę pobierać JSON z API wewnątrz useEffect, zapisywać odpowiedź w stanie oraz uruchamiać pobieranie tylko raz za pomocą pustej tablicy zależności. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Pobieranie danych przy montowaniu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Podstawy useEffect: zależności i sprzątanie
- Pobieranie danych przy montowaniu
- Obsługa stanów ładowania i błędów
- AbortController do sprzątania