Obsługa błędów i globalne interceptory
Obsługa błędów żądań i konfiguracja interceptorów Axios.
Obsługa błędów i globalne interceptory to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. 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 3 lekcji w sumie.
Żądania mogą się nie powieść
Połączenia sieciowe zrywają się, serwery zwracają błędy, a tokeny wygasają. Solidne aplikacje przewidują awarie i reagują na nie w kontrolowany sposób, zamiast się zawieszać lub pozostawiać użytkownika na zawsze z wyświetlonym spinnerem.
try/catch wokół żądań
Umieszczaj żądania opatrzone await wewnątrz try/catch, aby przechwytywać błędy. Axios zgłasza wyjątek, gdy serwer odpowie statusem 4xx lub 5xx.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}Sprawdzanie błędu
Błąd Axios zawiera przydatne szczegóły. error.response istnieje, gdy serwer odpowiedział, natomiast jego brak zwykle oznacza błąd sieci lub przekroczenie limitu czasu.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Śledzenie stanu błędu
Przechowuj komunikat błędu w stanie reaktywnym, aby szablon mógł wyświetlić go użytkownikowi.
data() {
return { posts: [], loading: false, error: null }
}Ustawianie błędu
Resetuj błąd przed każdym żądaniem, a następnie ustawiaj jego treść w bloku catch.
async fetchPosts() {
this.loading = true
this.error = null
try {
this.posts = (await api.get("/posts")).data
} catch (err) {
this.error = "Could not load posts. Please try again."
} finally {
this.loading = false
}
}Wyświetlanie komunikatów o błędach
Wyświetlaj błąd w szablonie, aby użytkownicy rozumieli, co poszło nie tak i co mogą zrobić dalej.
<template>
<p v-if="loading">Loading...</p>
<p v-else-if="error" class="error">{{ error }}</p>
<ul v-else>
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
</template>Czym są interceptory?
Interceptory Axios pozwalają automatycznie wykonywać kod przy każdym żądaniu lub odpowiedzi. Doskonale nadają się do obsługi przekrojowych aspektów, takich jak dołączanie tokenów lub centralna obsługa błędów.
Interceptory żądań
Interceptor żądania jest wykonywany przed wysłaniem każdego żądania. Użyj go, aby globalnie dołączać nagłówek uwierzytelniania.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Interceptory odpowiedzi
Interceptor odpowiedzi jest wykonywany po otrzymaniu każdej odpowiedzi. Przyjmuje dwa wywołania zwrotne: jedno dla powodzenia i jedno dla błędów.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Globalna obsługa błędów
Centralizacja logiki błędów w interceptorze odpowiedzi pozwala zachować przejrzystość poszczególnych komponentów. Typowe przypadki, takie jak 401 (wylogowanie) lub 500 (wyświetlenie powiadomienia typu toast), są obsługiwane w jednym miejscu.
api.interceptors.response.use(
res => res,
error => {
const status = error.response ? error.response.status : null
if (status === 401) logout()
if (status >= 500) showToast("Server error, try later")
return Promise.reject(error)
}
)Prosta logika ponawiania
W przypadku niestabilnych połączeń sieciowych możesz ograniczoną liczbę razy ponowić nieudane żądanie, zanim z niego zrezygnujesz.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat obsługi błędów i interceptorów.
Podsumowanie
Umieszczaj żądania w try/catch, wyświetlaj w interfejsie przyjazny komunikat error i sprawdzaj error.response, aby odróżniać błędy serwera od błędów sieci. Interceptory centralizują wspólne aspekty: interceptory żądań dołączają tokeny, interceptory odpowiedzi obsługują globalne błędy, a niewielki pomocnik do ponawiania zwiększa odporność aplikacji. Następnie zoptymalizujesz wydajność aplikacji.
Często zadawane pytania
Czy lekcja „Obsługa błędów i globalne interceptory” jest bezpłatna?
Tak — pełny tekst „Obsługa błędów i globalne interceptory” 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 3 lekcji w sumie.
Co nauczysz się w „Obsługa błędów i globalne interceptory”?
Obsługa błędów żądań i konfiguracja interceptorów Axios. Ć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 3.
Ile czasu zajmuje lekcja „Obsługa błędów i globalne interceptory”?
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
- Żądania HTTP z Axios
- Hooki cyklu życia i pobieranie danych
- Obsługa błędów i globalne interceptory