javascript / expert
Snippet
Verwaltung von Race Conditions in asynchronen Svelte-Effekten mittels kaskadierender AbortSignals
Schnelle Zustandsmutationen in reaktiven Systemen können sich überlappende asynchrone Anfragen auslösen. Das Verpacken von Aufgaben in automatisch abbrechende Controller garantiert, dass veraltete Netzwerk-Antworten verworfen werden, bevor der lokale Zustand mutiert wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export function createCancellableTask(asyncFn) {let currentController = null;return async function (...args) {if (currentController) currentController.abort('New invocation initiated');currentController = new AbortController();const { signal } = currentController;try {return await asyncFn(signal, ...args);} catch (err) {if (err.name === 'AbortError' || signal.aborted) return;throw err;}};}
svelte
Erklärung
1
let currentController = null;
Hält eine Referenz auf die aktive AbortController-Instanz im Closure-Scope.
2
if (currentController) currentController.abort('New invocation initiated');
Bricht jede vorherige laufende Ausführung ab, bevor die aktuelle gestartet wird.
3
currentController = new AbortController();
Instanziiert einen neuen AbortController zur Verfolgung des aktuellen Ausführungslebenszyklus.
4
return await asyncFn(signal, ...args);
Führt die zugrunde liegende asynchrone Aufgabe aus und übergibt das Abbruchsignal.
5
if (err.name === 'AbortError' || signal.aborted) return;
Unterdrückt beabsichtigte Abbruchfehler lautlos, während echte Laufzeitfehler erneut geworfen werden.