javascript / intermediate
Snippet
Verwaltung von Request-Abbrüchen mit AbortController in Vue-Composables
Die Verwendung des nativen JavaScript-AbortControllers in asynchronen Vue-Composables verhindert Race Conditions und Speicherlecks, indem ausstehende HTTP-Anfragen abgebrochen werden, sobald eine neue Anfrage startet oder der Komponenten-Scope zerstört wird.
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
24
25
26
27
28
import { ref, onScopeDispose } from 'vue';export function useFetchWithAbort(url) {const data = ref(null);const loading = ref(false);let controller = null;async function execute() {if (controller) controller.abort();controller = new AbortController();loading.value = true;try {const response = await fetch(url, { signal: controller.signal });data.value = await response.json();} catch (err) {if (err.name !== 'AbortError') throw err;} finally {loading.value = false;}}onScopeDispose(() => {if (controller) controller.abort();});return { data, loading, execute };}
vue
Erklärung
1
if (controller) controller.abort();
Bricht eine noch laufende Fetch-Anfrage ab, bevor eine neue gestartet wird.
2
const response = await fetch(url, { signal: controller.signal });
Übergibt das AbortSignal an die Fetch-API, um den Abbruch an den Controller zu binden.
3
if (err.name !== 'AbortError') throw err;
Ignoriert gewollte AbortError-Exceptions und leitet echte Netzwerkfehler weiter.
4
onScopeDispose(() => { if (controller) controller.abort(); });
Stellt sicher, dass aktive Anfragen beim Unmounten der Komponente automatisch abgebrochen werden.