Snippet

Behandlung von Asynchronen Race Conditions mittels WatchEffect AbortSignal

Beim Auslösen asynchroner Netzwerkanfragen innerhalb reaktiver Watcher verursachen schnelle Zustandsaktualisierungen Race Conditions, bei denen veraltete Anfragen neuere Antworten überschreiben. Vue's watchEffect übergibt eine onCleanup-Registrierungsfunktion, mit der ein AbortController-Signal angehängt werden kann. Wenn sich die verfolgte reaktive Abhängigkeit ��ndert, bevor der vorherige Promise aufgelöst wird, führt der Cleanup-Callback abort() aus, storniert die ausgehende HTTP-Anfrage und ignoriert AbortError-Ausnahmen sicher.

snippet.js

javascript

import { watchEffect, ref } from 'vue';
 
const query = ref('');
const result = ref(null);
 
watchEffect(async (onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.abort());
 
  try {
    const response = await fetch(`/api/search?q=${query.value}`, {
      signal: controller.signal
    });
    if (!response.ok) throw new Error(`HTTP status ${response.status}`);
    result.value = await response.json();
  } catch (err) {
    if (err.name !== 'AbortError') {
      console.error('Fetch operation failed:', err);
    }
  }
});

vue

Erklärung

watchEffect(async (onCleanup) => {

Registriert einen reaktiven Effekt, der Abhängigkeiten automatisch verfolgt und einen onCleanup-Callback akzeptiert.

const controller = new AbortController();

Instanziiert einen DOM AbortController zur Verwaltung des Abbruchs der ausstehenden Fetch-Anfrage.

onCleanup(() => controller.abort());

Plant controller.abort() zur Ausführung ein, sobald der Effekt erneut läuft oder der Scope unmountet.

signal: controller.signal

Bindet das AbortSignal-Objekt direkt an die Fetch-Optionen, um einen Abbruch auf Netzwerkebene zu ermöglichen.

if (err.name !== 'AbortError') {

Filtert beabsichtigte Abbruchsignale heraus, sodass nur tatsächliche Netz- oder HTTP-Fehler protokolliert werden.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Behandlung von Asynchronen Race Conditions mittels WatchEffect AbortSignal

Verwandt