Asynchroniczna obsługa błędów w composable
try/catch w asynchronicznych composable, udostępnianie stanu błędu oraz logika ponawiania w useFetch.
Asynchroniczna obsługa błędów w composable to bezpłatna lekcja Vue 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Błędy w asynchronicznych composable'ach
Composable'e, które pobierają dane lub wykonują operacje asynchroniczne, wymagają własnej strategii obsługi błędów. Wzorzec polega na udostępnieniu refu error, aby kod korzystający z composable'a mógł reagować, oraz na wewnętrznym przechwytywaniu błędów przez funkcję asynchroniczną.
Udostępnianie refu error
Należy zwracać ref error razem z danymi i stanem ładowania. Kod korzystający z composable'a może go obserwować, aby wyświetlać komunikaty.
function useApi() {
const data = ref(null);
const error = ref(null);
return { data, error };
}try / catch w funkcjach asynchronicznych
Wewnątrz funkcji asynchronicznej należy umieścić wywołania z await w bloku try/catch i zapisać błąd w refie error, zamiast dopuścić do jego nieprzechwyconego zgłoszenia.
async function load() {
try {
data.value = await api.get();
} catch (e) {
error.value = e;
}
}Resetowanie stanu błędu
Na początku każdej próby należy wyczyścić poprzedni błąd, aby nieaktualne komunikaty nie pozostawały po pomownej próbie zakończonej sukcesem.
async function load() {
error.value = null;
try { /* ... */ } catch (e) { error.value = e; }
}Ref retryCount
Aby obsługiwać ponowne próby, należy śledzić liczbę podejść za pomocą refu retryCount. Trzeba go zwiększać przy każdej ponownej próbie użytkownika.
const retryCount = ref(0);
function retry() {
retryCount.value++;
load();
}Automatyczne ponawianie prób
Można automatycznie ponawiać próbę do określonego limitu, stosując coraz dłuższe przerwy między próbami. Należy zakończyć ponawianie, gdy licznik przekroczy ustalone maksimum.
async function load() {
try {
data.value = await api.get();
} catch (e) {
if (retryCount.value < 3) {
retryCount.value++;
return load();
}
error.value = e;
}
}Zwracanie pełnego API
Należy udostępnić dane, błąd, funkcję ponawiania oraz retryCount, aby komponent miał wszystko, czego potrzebuje.
return { data, error, retry, retryCount };Korzystanie z błędu
W komponencie należy renderować zawartość na podstawie refu error i udostępnić przycisk ponowienia próby połączony z udostępnioną funkcją.
<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>Błąd w composable'u a globalny moduł obsługi
Obsługa błędów na poziomie composable'a służy do oczekiwanych awarii, na które interfejs powinien reagować — na przykład nieudanego żądania lub błędu walidacji. To komponent decyduje, jak je zaprezentować.
Kiedy działa globalna granica
Globalny moduł obsługi i granice obsługi błędów przechwytują nieoczekiwane, nieobsłużone błędy — błędy programistyczne i awarie renderowania. Są siatką bezpieczeństwa, a nie podstawowym mechanizmem obsługi przewidywalnych błędów asynchronicznych.
Wybór właściwej warstwy
Ogólna zasada jest następująca: przewidywane błędy asynchroniczne należy obsługiwać wewnątrz composable'a za pomocą refu error, a naprawdę nieoczekiwanym błędom pozwolić propagować się do globalnego modułu obsługi. Dzięki temu komunikaty interfejsu pozostają lokalne, a ochrona przed awariami jest globalna.
Szybkie sprawdzenie
Gdzie należy obsługiwać oczekiwane błędy asynchroniczne, takie jak nieudane pobieranie danych?
Podsumowanie
Dowiedziano się, że asynchroniczne composable'e udostępniają ref error, używają try/catch w funkcjach asynchronicznych, obsługują ponawianie prób za pomocą refu retryCount i funkcji ponawiania, a błędy na poziomie composable'a służą do obsługi oczekiwanych awarii, podczas gdy globalny moduł obsługi zajmuje się nieoczekiwanymi błędami.
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 „Asynchroniczna obsługa błędów w composable” jest bezpłatna?
Tak — pełny tekst „Asynchroniczna obsługa błędów w composable” 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 „Asynchroniczna obsługa błędów w composable”?
try/catch w asynchronicznych composable, udostępnianie stanu błędu oraz logika ponawiania w useFetch. Ć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 4 z 4.
Ile czasu zajmuje lekcja „Asynchroniczna obsługa błędów w composable”?
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
- Hook cyklu życia onErrorCaptured
- Komponenty Error Boundary
- app.config.errorHandler dla błędów globalnych
- Asynchroniczna obsługa błędów w composable