javascript / intermediate
Snippet
Abbrechen asynchroner Anfragen in Composables mittels AbortController
Wenn asynchrone Netzwerkanfragen durch reaktive Zustandsänderungen ausgelöst werden, können schnelle Eingaben zu Race Conditions führen, bei denen veraltete Antworten neuere Daten überschreiben. Die Integration des nativen JavaScript AbortControllers in watchEffect bricht laufende Anfragen ab, bevor neue gestartet werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { ref, watchEffect, onUnmounted } from 'vue';export function useFetchUser(userIdRef) {const userData = ref(null);let controller = null;watchEffect(async () => {if (controller) controller.abort();controller = new AbortController();try {const response = await fetch(`/api/users/${userIdRef.value}`, {signal: controller.signal});userData.value = await response.json();} catch (err) {if (err.name !== 'AbortError') throw err;}});onUnmounted(() => controller?.abort());return { userData };}
vue
Erklärung
1
if (controller) controller.abort();
Bricht das Signal der vorherigen ausstehenden HTTP-Anfrage ab, bevor eine neue Netzwerkoperation ausgeführt wird.
2
controller = new AbortController();
Erzeugt eine neue AbortController-Instanz, die ein eindeutiges Abbruchsignal bereitstellt.
3
signal: controller.signal
Verbindet den Fetch-Aufruf mit dem Controller-Signal, sodass der Browser die Anfrage bei Bedarf sofort abbricht.
4
if (err.name !== 'AbortError') throw err;
Filtert erwartete AbortError-Ausnahmen heraus, damit gewollte Anfragenabbrüche nicht als Anwendungsfehler gewertet werden.
5
onUnmounted(() => controller?.abort());
Stellt sicher, dass alle laufenden Anfragen abgebrochen werden, wenn die verwendende Komponente aus dem DOM entfernt wird.