Obsługa stanów ładowania i błędów
Proszę dodać do komponentu zmienne stanu ładowania i błędu, wyświetlać spinner podczas pobierania oraz przyjazny komunikat o błędzie w razie niepowodzenia.
Obsługa stanów ładowania i błędów to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 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.
Trzy stany danych asynchronicznych
Każda asynchroniczna operacja na danych ma trzy stany: ładowanie (żądanie jest w toku), sukces (otrzymano dane), błąd (żądanie nie powiodło się). Interfejs użytkownika powinien jawnie obsługiwać wszystkie trzy.
Interfejs podczas ładowania
Podczas ładowania wyświetl wskaźnik, szkielet lub element zastępczy. Zapobiegaj ponownemu wysłaniu formularza, wyłączając przyciski podczas ładowania. Użytkownik powinien zawsze wiedzieć, że aplikacja działa.
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}Interfejs błędu
Gdy żądanie się nie powiedzie, wyświetl przyjazny komunikat o błędzie. Dodaj możliwość ponowienia, aby użytkownik nie utknął. Pełny błąd zapisuj w dzienniku na potrzeby programistów.
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}Mechanizm ponawiania
Zwiększ licznik ponowień w stanie i dodaj go do tablicy zależności efektu. Gdy użytkownik kliknie przycisk ponowienia, licznik się zmieni, uruchamiając efekt ponownie.
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>Najlepsze praktyki dotyczące stanu ładowania
1) Wyświetlaj stan ładowania natychmiast po rozpoczęciu żądania. 2) Ograniczaj stan ładowania do minimum — nie ustawiaj go ponownie, jeśli dostępne są dane z pamięci podręcznej. 3) W przypadku stronicowania rozróżniaj ładowanie początkowe od doładowywania kolejnych elementów. 4) Nigdy nie pokazuj wskaźnika ładowania przez mniej niż 100 ms — dodaj opóźnienie lub pozostaw widoczne poprzednie dane.
Optymistyczne aktualizacje
Optymistyczne aktualizacje polegają na natychmiastowej aktualizacji interfejsu przed potwierdzeniem przez serwer, a następnie wycofaniu zmiany, jeśli żądanie się nie powiedzie. Daje to wrażenie natychmiastowej reakcji aplikacji.
// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
await deleteItem(id);
} catch (err) {
setItems(prevItems); // revert on failure
showError('Delete failed. Changes reverted.');
}Granice błędów dla błędów renderowania
Używaj granic błędów (komponentów klasowych z componentDidCatch), aby przechwytywać błędy zgłaszane podczas renderowania. Wyświetlają one zastępczy interfejs zamiast powodować awarię całej aplikacji.
Mapowanie błędów HTTP
Mapuj kody statusu HTTP na przyjazne dla użytkownika komunikaty. 401 → przekieruj do logowania. 403 → wyświetl „Odmowa dostępu”. 404 → „Nie znaleziono”. 429 → „Zbyt wiele żądań — proszę czekać”. 500+ → „Błąd serwera — spróbuj ponownie”.
function mapStatusToMessage(status: number): string {
if (status === 401) return 'Please sign in to continue';
if (status === 403) return 'You don\'t have permission to do this';
if (status === 404) return 'This item no longer exists';
if (status === 429) return 'Too many requests. Please wait a moment';
if (status >= 500) return 'Server error. We\'re looking into it';
return 'Something went wrong';
}useReducer dla złożonego stanu pobierania
Gdy stan ładowania, błąd i dane wzajemnie na siebie oddziałują, na przykład podczas czyszczenia błędu przy ponownym ładowaniu, użycie reduktora jest czytelniejsze niż wielu wywołań useState.
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense — przyszłość
React Suspense wraz z frameworkami do pobierania danych (React Query, Relay, Next.js) pozwala komponentom „wstrzymać się” podczas oczekiwania na dane. Nadrzędna granica Suspense automatycznie wyświetla zastępczy interfejs. To właśnie w tym kierunku rozwija się React.
Błąd sieci a błąd serwera
Błędy sieci, takie jak brak połączenia lub CORS, są zgłaszane w bloku catch. Błędy serwera (4xx, 5xx) kończą się normalnie — musisz sprawdzić res.ok, aby je wykryć. Obsługa błędów musi uwzględniać obie kategorie.
Szybkie sprawdzenie
Co to jest „optymistyczna aktualizacja”?
Podsumowanie: stany ładowania i błędu
Zawsze obsługuj stany ładowania, powodzenia i błędu. Wyświetlaj zrozumiały interfejs podczas ładowania. Mapuj błędy HTTP na przyjazne dla użytkownika komunikaty. Implementuj mechanizmy ponawiania. Stosuj optymistyczne aktualizacje, aby zapewnić natychmiastową odczuwalną reakcję. Używaj useReducer do skoordynowanego stanu pobierania. Suspense ostatecznie jeszcze bardziej uprości ten schemat.
Często zadawane pytania
Czy lekcja „Obsługa stanów ładowania i błędów” jest bezpłatna?
Tak — pełny tekst „Obsługa stanów ładowania i błędów” 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 „Obsługa stanów ładowania i błędów”?
Proszę dodać do komponentu zmienne stanu ładowania i błędu, wyświetlać spinner podczas pobierania oraz przyjazny komunikat o błędzie w razie niepowodzenia. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Obsługa stanów ładowania i błędów”?
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