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

javascript

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

watchEffect(async (onCleanup) => { ... });

Akzeptiert einen onCleanup-Callback, der bei jeder erneuten Auslösung des Effekts läuft.

onCleanup(() => active = false);

Registriert eine Bereinigungsfunktion, um die aktuelle Ausführung als veraltet zu markieren.

if (active) { ... }

Stellt sicher, dass die UI nur aktualisiert wird, wenn dieser spezifische Aufruf noch relevant ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Handhabung von Race Conditions in watchEffect

Verwandt