javascript / expert
Snippet
Resiliente asynchrone Komponenten mit Fehlerbehandlung
Eine Experten-Anwendungsarchitektur erfordert den robusten Umgang mit Netzwerkfehlern. defineAsyncComponent ermöglicht es, komplexe Ladezustände, Timeouts und automatische Retry-Logik für dynamisch importierte Komponenten zu definieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { defineAsyncComponent } from 'vue';import ErrorComp from './Error.vue';import LoadingComp from './Loading.vue';const AsyncChart = defineAsyncComponent({loader: () => import('./BigChart.vue'),loadingComponent: LoadingComp,errorComponent: ErrorComp,delay: 200,timeout: 3000,onError(error, retry, fail, attempts) {if (attempts <= 3) retry();else fail();}});
vue
Erklärung
1
onError(error, retry, fail, attempts) {
Fängt Ladefehler ab, um eine benutzerdefinierte Recovery-Logik zu implementieren.
2
if (attempts <= 3) retry();
Triggert programmatisch einen erneuten Ladeversuch, falls der vorherige fehlgeschlagen ist.
3
timeout: 3000,
Gibt eine maximale Dauer an, bevor die Fehlerkomponente angezeigt wird.