useFetch: composable do danych asynchronicznych
refy data, loading i error, pobieranie przy montowaniu, funkcja refetch oraz czyszczenie przez AbortController.
useFetch: composable do danych asynchronicznych to bezpłatna lekcja Vue 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Cel useFetch
Asynchroniczne pobieranie danych powtarza się w wielu miejscach: flagi ładowania, obsługa błędów i samo żądanie. useFetch łączy to w jeden wielokrotnego użytku composable, zwracający data, loading i error.
Trzy reaktywne refy
Na początek należy utworzyć trzy refy opisujące stan dowolnego żądania asynchronicznego.
import { ref } from "vue";
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
}Procedura pobierania
Należy napisać funkcję asynchroniczną, która zmienia wartość loading, wykonuje żądanie i zapisuje wynik. W kolejnym kroku dopracujemy obsługę błędów.
async function execute() {
loading.value = true;
const res = await fetch(url);
data.value = await res.json();
loading.value = false;
}try / catch / finally
Należy opakować żądanie w taki sposób, aby błędy trafiały do error, a loading zawsze było resetowane — niezależnie od powodzenia lub niepowodzenia — w bloku finally.
async function execute() {
loading.value = true;
error.value = null;
try {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
data.value = await res.json();
} catch (e) {
error.value = e;
} finally {
loading.value = false;
}
}Pobieranie w onMounted
Należy rozpocząć żądanie podczas montowania komponentu, aby dane ładowały się automatycznie.
import { onMounted } from "vue";
onMounted(execute);Funkcja refetch
Należy udostępnić execute pod nazwą refetch, aby odbiorcy mogli ponownie załadować dane na żądanie — na przykład po mutacji lub kliknięciu przycisku ponowienia.
return { data, loading, error, refetch: execute };AbortController do sprzątania
Jeśli komponent zostanie odmontowany w trakcie żądania, należy przerwać pobieranie, aby uniknąć ustawiania stanu nieaktywnego komponentu. Należy utworzyć AbortController i przekazać jego sygnał.
const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });Przerywanie przy odmontowaniu
Należy anulować trwające żądanie w onUnmounted. W bloku catch należy zignorować wynikający z tego błąd przerwania.
import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());Pełny useFetch
Po złożeniu wszystkich elementów composable obsługuje ładowanie, błędy, ponowne pobieranie i sprzątanie w jednej uporządkowanej całości.
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
const controller = new AbortController();
async function execute() {
loading.value = true; error.value = null;
try {
const res = await fetch(url, { signal: controller.signal });
data.value = await res.json();
} catch (e) {
if (e.name !== "AbortError") error.value = e;
} finally {
loading.value = false;
}
}
onMounted(execute);
onUnmounted(() => controller.abort());
return { data, loading, error, refetch: execute };
}Używanie w komponencie
Odbiorcy renderują widok na podstawie trzech refów — wyświetlają spinner podczas ładowania, komunikat o błędzie w razie niepowodzenia, a w pozostałych przypadkach dane.
const { data, loading, error } = useFetch("/api/posts");Wzorzec szablonu
W szablonie należy rozgałęzić widok na podstawie stanu, aby zapewnić kompletny interfejs użytkownika.
<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>Szybkie sprawdzenie
Jaką rolę pełni AbortController w useFetch?
Podsumowanie
Utworzył Pan/Pani useFetch(url), udostępniający refy data, loading i error, pobierający dane w onMounted z użyciem wzorca try/catch/finally, funkcję refetch oraz element AbortController sprzątany w onUnmounted.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „useFetch: composable do danych asynchronicznych” jest bezpłatna?
Tak — pełny tekst „useFetch: composable do danych asynchronicznych” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „useFetch: composable do danych asynchronicznych”?
refy data, loading i error, pobieranie przy montowaniu, funkcja refetch oraz czyszczenie przez AbortController. Ćwiczysz Vue 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ąć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue 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 „useFetch: composable do danych asynchronicznych”?
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 Vue Academy?
Tak. Każda lekcja Vue 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
- Co wyróżnia dobry composable
- useCounter: prosty composable
- useFetch: composable do danych asynchronicznych
- VueUse: biblioteka composable