JavaScript Academy · Lekcja

Przerywanie żądań za pomocą AbortController

Proszę poprawnie anulować żądania będące w toku.

Przerywanie żądań za pomocą AbortController to bezpłatna lekcja JavaScript 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Dlaczego należy anulować żądanie

Czasami rozpoczyna się żądanie, które nie jest już potrzebne: użytkownik przechodzi na inną stronę, wpisuje nowe wyszukiwanie lub upływa limit czasu. AbortController umożliwia anulowanie fetch będącego w toku.

Tworzenie kontrolera

Należy utworzyć obiekt AbortController. Udostępnia on właściwość signal, którą przekazuje się do fetch, oraz metodę abort() służącą do anulowania żądania.

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

Przekazywanie sygnału

Sygnał kontrolera należy przekazać do fetch za pośrednictwem obiektu opcji. Żądanie można teraz anulować.

fetch(url, { signal: controller.signal });

Wywoływanie abort

Wywołanie controller.abort() anuluje żądanie. Oczekujący Promise fetch zostanie odrzucony z błędem AbortError.

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

Przechwytywanie AbortError

Zamierzone anulowanie należy odróżnić od rzeczywistego błędu, sprawdzając w bloku catch warunek err.name === "AbortError".

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

Schemat limitu czasu

Z setTimeout można połączyć automatyczne anulowanie powolnych żądań. Jeśli żądanie zakończy się wcześniej, należy wyczyścić timer.

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

Wbudowany pomocnik limitu czasu

Nowoczesne środowiska udostępniają AbortSignal.timeout(ms), które zwraca sygnał automatycznie anulujący żądanie. Jest to prostsze rozwiązanie niż samodzielne konfigurowanie setTimeout.

fetch(url, { signal: AbortSignal.timeout(5000) });

Anulowanie poprzedniego wyszukiwania

W wyszukiwaniu z podpowiedziami należy anulować poprzednie żądanie przed rozpoczęciem nowego. Zapobiega to zastąpieniu aktualnych wyników nieaktualną odpowiedzią.

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

Jeden signal, wiele wywołań fetch

Pojedynczy signal może jednocześnie anulować wiele żądań. Ten sam signal należy przekazać do kilku wywołań fetch, a jedno abort() anuluje je wszystkie.

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

Sygnały już anulowane

Jeśli signal jest już anulowany w momencie przekazania go do fetch, żądanie zostanie natychmiast odrzucone. W razie potrzeby jego stan można sprawdzić za pomocą signal.aborted.

if (controller.signal.aborted) console.log("already cancelled");

Sprzątanie podczas odmontowywania

W interfejsach opartych na komponentach należy anulować oczekujące żądania podczas niszczenia komponentu, aby uniknąć ustawiania stanu w elemencie, który już nie istnieje.

const controller = new AbortController();
// on teardown:
controller.abort();

Szybki sprawdzian

Anulowanie żądań fetch.

Podsumowanie

Należy utworzyć AbortController, przekazać jego signal do fetch i wywołać abort(), aby anulować żądanie. Promise zostanie odrzucony z błędem AbortError, który można wykryć na podstawie nazwy. Mechanizmu tego należy używać do obsługi limitów czasu (AbortSignal.timeout), anulowania poprzedniego wyszukiwania, anulowania wielu żądań oraz sprzątania podczas niszczenia komponentu.

Często zadawane pytania

Czy lekcja „Przerywanie żądań za pomocą AbortController” jest bezpłatna?

Tak — pełny tekst „Przerywanie żądań za pomocą AbortController” 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 JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Przerywanie żądań za pomocą AbortController”?

Proszę poprawnie anulować żądania będące w toku. Ćwiczysz JavaScript 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ąć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript 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 „Przerywanie żądań za pomocą AbortController”?

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 JavaScript Academy?

Tak. Każda lekcja JavaScript 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

Wysyłanie żądań GET
POST i wysyłanie danych
Obsługa błędów i kodów stanu
Przerywanie żądań za pomocą AbortController

← Powrót do JavaScript Academy