javascript / expert
Snippet
Auto-Abbruch in asynchronen Composables
Experten-Async-Management in Vue beinhaltet den Umgang mit Race Conditions. Durch die Verwendung des 'onCleanup'-Callbacks innerhalb eines Watchers können wir ausstehende Fetch-Anfragen via AbortController abbrechen, wann immer sich die Quell-URL ändert, um sicherzustellen, dass nur die Daten der neuesten Anfrage verwendet werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { ref, watch, toValue } from 'vue';export function useAsyncData(urlSource) {const data = ref(null);watch(() => toValue(urlSource), async (url, oldUrl, onCleanup) => {const controller = new AbortController();onCleanup(() => controller.abort());try {const response = await fetch(url, { signal: controller.signal });data.value = await response.json();} catch (e) {if (e.name !== 'AbortError') console.error(e);}}, { immediate: true });return { data };}
vue
Erklärung
1
onCleanup(() => controller.abort())
Wird ausgeführt, bevor der Watcher erneut läuft oder die Komponente entfernt wird.
2
toValue(urlSource)
Normalisiert Refs oder Getter in ihre Rohwerte für das Tracking.