javascript / intermediate
Snippet
Handhabung von Lade- und Fehlerzuständen in asynchronen Komponenten
Asynchrone Komponenten helfen dabei, den Code in kleinere Teile aufzuteilen. Durch die Bereitstellung einer Lade- und Fehlerkomponente verbessern Sie das Benutzererlebnis bei Netzwerklatenz oder Fehlern. Die Eigenschaft 'delay' verhindert das Flackern des Lade-Spinners bei schnellen Verbindungen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { defineAsyncComponent } from 'vue';import LoadingSpinner from './LoadingSpinner.vue';import ErrorMessage from './ErrorMessage.vue';const AsyncChart = defineAsyncComponent({loader: () => import('./components/BigChart.vue'),loadingComponent: LoadingSpinner,errorComponent: ErrorMessage,delay: 200,timeout: 3000});
vue
Erklärung
1
loader: () => import(...)
Die Funktion, die den tatsächlichen dynamischen Import der Komponente ausführt.
2
delay: 200,
Wartezeit in Millisekunden, bevor die Ladekomponente angezeigt wird.
3
timeout: 3000
Wenn der Loader länger braucht, wird die Fehlerkomponente angezeigt.