Pobieranie danych: useFetch i useAsyncData
useFetch(), useAsyncData(), pobieranie po stronie serwera i klienta, refresh() oraz stan pending.
Pobieranie danych: useFetch i useAsyncData to bezpłatna lekcja Vue 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Pobieranie danych w Nuxt
Nuxt udostępnia composable do pobierania danych uwzględniające SSR. Działają one na serwerze podczas renderowania i przekazują wyniki do klienta, unikając ponownego żądania oraz mignięcia pustej treści.
Podstawy useFetch
useFetch opakowuje pobieranie adresu URL. Zwraca reaktywne wartości data, pending i error, których można bezpośrednio używać w szablonie.
<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>Wyświetlanie stanu ładowania i błędów
Użyj pending w stanie ładowania, a error w przypadku błędów. W data przechowywany jest sparsowany JSON.
<template>
<p v-if="pending">Loading...</p>
<p v-else-if="error">Failed to load</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>
</template>useAsyncData do niestandardowej logiki
Gdy potrzebujesz czegoś więcej niż prostego adresu URL — połączenia wywołań lub przekształcania wyników — użyj useAsyncData. Przyjmuje on unikatowy klucz i funkcję pobierającą dane.
const { data } = await useAsyncData('posts', () => {
return $fetch('/api/posts')
})Dlaczego klucz ma znaczenie
Klucz eliminuje duplikaty żądań i przechowuje ich wyniki w pamięci podręcznej. Dwa komponenty używające tego samego klucza współdzielą jeden wynik i jedno wywołanie sieciowe, co zapobiega zbędnemu pobieraniu danych.
useFetch to skrót składniowy
Wewnętrznie useFetch(url) jest zasadniczo odpowiednikiem useAsyncData z automatycznie wygenerowanym kluczem i funkcją pobierającą $fetch(url). Używaj useFetch dla prostych adresów URL, a useAsyncData dla niestandardowych funkcji pobierających dane.
Tylko po stronie klienta za pomocą server:false
Ustaw server: false, aby pominąć pobieranie podczas SSR i uruchamiać je tylko po stronie klienta — jest to przydatne w przypadku danych zależnych od użytkownika, które nie powinny blokować renderowania po stronie serwera.
const { data } = await useFetch('/api/me', {
server: false
})Leniwe pobieranie bez blokowania
Domyślnie await blokuje nawigację do czasu nadejścia danych. Opcja lazy lub useLazyFetch pozwala natychmiast wyrenderować stronę i uzupełnić dane po zakończeniu pobierania.
const { data, pending } = useFetch('/api/posts', {
lazy: true
})Ponowne pobieranie za pomocą refresh
Composables zwracają funkcję refresh, która pozwala ponownie uruchomić pobieranie na żądanie — po mutacji lub kliknięciu przycisku.
const { data, refresh } = await useFetch('/api/posts')
function reload() { refresh() }Reaktywne parametry zapytania
Przekaż query lub reaktywne opcje. Gdy obserwowany ref się zmieni, pobieranie zostanie automatycznie uruchomione ponownie. Powiąż watch, aby ponownie pobierać dane po zmianie zależności.
const page = ref(1)
const { data } = await useFetch('/api/posts', {
query: { page },
watch: [page]
})Przekształcanie odpowiedzi
Opcja transform zmienia strukturę odpowiedzi, zanim trafi ona do data — jest to przydatne, gdy chcesz wybrać tylko potrzebne pola i zmniejszyć rozmiar danych wysyłanych do klienta.
const { data } = await useFetch('/api/user', {
transform: (u) => ({ name: u.name, id: u.id })
})Szybki test
Sprawdź swoją wiedzę na temat pobierania danych w Nuxt.
Podsumowanie
Wiesz już, jak pobierać dane w Nuxt:
- useFetch zwraca reaktywne dane, pending i error.
- useAsyncData przyjmuje klucz oraz funkcję pobierającą dane na potrzeby niestandardowej logiki.
- server:false uruchamia pobieranie tylko po stronie klienta, a lazy sprawia, że nie blokuje ono renderowania.
- refresh() ponownie pobiera dane, a watch uruchamia pobieranie po zmianie zależności.
Często zadawane pytania
Czy lekcja „Pobieranie danych: useFetch i useAsyncData” jest bezpłatna?
Tak — pełny tekst „Pobieranie danych: useFetch i useAsyncData” 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 „Pobieranie danych: useFetch i useAsyncData”?
useFetch(), useAsyncData(), pobieranie po stronie serwera i klienta, refresh() oraz stan pending. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Pobieranie danych: useFetch i useAsyncData”?
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
- Struktura projektu Nuxt 3 i routing oparty na plikach
- Pobieranie danych: useFetch i useAsyncData
- Trasy serwerowe i endpointy API w Nuxt
- Tryby SSR, SSG i SPA