AbortController do sprzątania
Proszę utworzyć AbortController, przekazać jego sygnał do fetch oraz anulować trwające żądania w funkcji sprzątającej, aby zapobiec aktualizowaniu stanu odmontowanych komponentów.
AbortController do sprzątania to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 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.
Dlaczego anulować żądania fetch?
Gdy komponent jest odmontowywany lub ponownie pobiera dane, poprzednie żądanie może nadal być w toku. Jeśli zakończy się po nowym żądaniu, nieaktualne dane zastąpią aktualne. AbortController czysto anuluje żądania znajdujące się w toku.
Podstawy AbortController
Utwórz AbortController, przekaż jego signal do fetch i wywołaj controller.abort(), aby anulować żądanie. Po anulowaniu fetch zgłasza wyjątek AbortError.
const controller = new AbortController();
try {
const res = await fetch('/api/data', { signal: controller.signal });
const data = await res.json();
setData(data);
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') {
console.log('Request was cancelled');
} else {
setError((err as Error).message);
}
}
// To cancel:
controller.abort();W funkcji czyszczącej useEffect
Utwórz AbortController na początku efektu i wywołaj abort() w funkcji czyszczącej. Automatycznie anuluje to żądanie po zmianie zależności lub odmontowaniu komponentu.
useEffect(() => {
const controller = new AbortController();
async function load() {
try {
const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
if (!res.ok) throw new Error(`${res.status}`);
setUser(await res.json());
} catch (err) {
if ((err as DOMException).name !== 'AbortError') {
setError((err as Error).message);
}
}
}
load();
return () => controller.abort();
}, [userId]);AbortError a błąd sieci
Anulowane żądanie zgłasza DOMException o nazwie 'AbortError'. Zawsze sprawdzaj tę nazwę osobno i nie wyświetlaj jej użytkownikowi jako błędu — jest to oczekiwane zachowanie podczas czyszczenia.
Właściwość signal.aborted
Sprawdzaj controller.signal.aborted, aby określić, czy sygnał został anulowany. Jest to przydatne do sprawdzenia tego przed wywołaniem setState w kodzie asynchronicznym.
const data = await fetchData();
if (!controller.signal.aborted) {
setData(data); // safe to update state
}Anulowanie wielu żądań
Jeden AbortController może anulować wiele żądań fetch, jeśli przekażesz ten sam sygnał do wszystkich z nich.
const controller = new AbortController();
const { signal } = controller;
await Promise.all([
fetch('/api/users', { signal }),
fetch('/api/products', { signal }),
fetch('/api/settings', { signal }),
]);
controller.abort(); // cancels all threeAbortController z Axios
Axios obsługuje sygnał AbortController za pomocą opcji signal w konfiguracji. Interfejs sygnału jest taki sam jak w fetch.
const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });
// In cleanup:
return () => controller.abort();React Query obsługuje to automatycznie
Podczas korzystania z TanStack Query (React Query) anulowanie jest obsługiwane automatycznie. React Query wewnętrznie tworzy i anuluje kontrolery. To jeden z powodów, dla których warto preferować je zamiast ręcznych schematów pobierania danych.
Limit czasu z AbortController
Połącz AbortController z setTimeout, aby zaimplementować limity czasu żądań.
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
try {
const data = await fetch(url, { signal: controller.signal });
// ...
} finally {
clearTimeout(timeoutId);
}AbortSignal.timeout() — nowoczesny skrót
W nowoczesnych przeglądarkach AbortSignal.timeout(ms) tworzy sygnał, który automatycznie anuluje się po określonym czasie, bez potrzeby ręcznego tworzenia kontrolera.
const res = await fetch('/api/data', {
signal: AbortSignal.timeout(5000) // 5 second timeout
});Czyszczenie ma kluczowe znaczenie w React 18 Strict Mode
React 18 Strict Mode dwukrotnie montuje efekty w środowisku deweloperskim. Bez czyszczenia za pomocą AbortController zobaczysz podwójne pobieranie danych i potencjalne ostrzeżenia o aktualizowaniu stanu odmontowanego komponentu. Schemat czyszczenia zapobiega obu problemom.
Szybkie sprawdzenie
Jak zapobiec aktualizacji stanu przez nieaktualną odpowiedź sieciową po ponownym renderowaniu komponentu?
Podsumowanie: AbortController
Twórz osobny AbortController dla każdego efektu. Przekazuj signal do fetch/axios. Anuluj żądanie w funkcji czyszczącej. Ignoruj AbortError — jest oczekiwany. Używaj signal.aborted przed wywołaniem setState w kodzie asynchronicznym. Jeden kontroler może anulować wiele żądań. Używaj AbortSignal.timeout() do ustawiania limitów czasu. React Query obsługuje to wszystko automatycznie.
Często zadawane pytania
Czy lekcja „AbortController do sprzątania” jest bezpłatna?
Tak — pełny tekst „AbortController do sprzątania” 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 „AbortController do sprzątania”?
Proszę utworzyć AbortController, przekazać jego sygnał do fetch oraz anulować trwające żądania w funkcji sprzątającej, aby zapobiec aktualizowaniu stanu odmontowanych komponentów. Ć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 4 z 4.
Ile czasu zajmuje lekcja „AbortController do sprzątania”?
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