javascript / expert
Snippet
Vermeidung von asynchronen Race Conditions mit AbortController
In den reaktiven Effekten von Svelte können aufeinanderfolgende Updates neue Fetch-Anfragen auslösen, bevor vorherige abgeschlossen sind. Durch die Verwendung von AbortController in der Cleanup-Funktion des Effekts stellen wir sicher, dass veraltete Anfragen abgebrochen werden, was UI-Inkonsistenzen und Speicherlecks verhindert.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$effect(() => {const controller = new AbortController();const signal = controller.signal;async function loadData() {try {const response = await fetch(`/api/data/${id}`, { signal });data = await response.json();} catch (err) {if (err.name !== 'AbortError') console.error(err);}}loadData();return () => controller.abort();});
svelte
Erklärung
1
const controller = new AbortController();
Initialisiert einen neuen Controller, um das Abbruchsignal für die aktuelle Ausführung des Effekts zu verwalten.
2
return () => controller.abort();
Die von Svelte aufgerufene Cleanup-Funktion, bevor der Effekt erneut ausgeführt oder die Komponente zerstört wird, was den Abbruch auslöst.