javascript / expert
Snippet
Handhabung von Race Conditions in watchEffect
Bei asynchronen Operationen in einem Watcher tritt eine Race Condition auf, wenn ein neuer Effekt startet, bevor der vorherige beendet ist. Die Verwendung des onCleanup-Callbacks ermöglicht es, vorherige ausstehende Anfragen oder lokale Zustandsvariablen zu invalidieren.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
import { watchEffect, ref } from 'vue';const id = ref(1);watchEffect(async (onCleanup) => {let active = true;onCleanup(() => active = false);const data = await fetch(`https://api.example.com/item/${id.value}`);if (active) {console.log('Update UI with:', data);}});
vue
Erklärung
1
watchEffect(async (onCleanup) => { ... });
Akzeptiert einen onCleanup-Callback, der bei jeder erneuten Auslösung des Effekts läuft.
2
onCleanup(() => active = false);
Registriert eine Bereinigungsfunktion, um die aktuelle Ausführung als veraltet zu markieren.
3
if (active) { ... }
Stellt sicher, dass die UI nur aktualisiert wird, wenn dieser spezifische Aufruf noch relevant ist.