javascript / expert
Snippet
Verwaltung konkurrierender asynchroner Anfragen mit AbortSignal in Custom Stores
Wenn bei mehreren schnellen asynchronen Anfragen in Svelte-Stores Race Conditions auftreten, können veraltete Daten neuere Zuweisungen überschreiben. Die Verwendung von AbortController bricht ausstehende HTTP-Anfragen automatisch ab, wenn ein neuer Aufruf erfolgt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
export function createAsyncAbortStore() {let activeController = null;return {async executeFetch(requestUrl) {if (activeController) activeController.abort();activeController = new AbortController();const response = await fetch(requestUrl, { signal: activeController.signal });return await response.json();}};}
svelte
Erklärung
1
export function createAsyncAbortStore() {
Factory-Funktion für einen Store mit automatischer Abbruchfunktion für Anfragen.
2
let activeController = null;
Speichert die Referenz auf den aktiven AbortController der laufenden Anfrage.
3
if (activeController) activeController.abort();
Bricht bestehende HTTP-Anfragen ab, bevor eine neue Anfrage gestartet wird.
4
activeController = new AbortController();
Erstellt eine neue AbortController-Instanz zur Signal-Verknüpfung.
5
const response = await fetch(requestUrl, { signal: activeController.signal });
Übergibt das AbortSignal direkt an die native fetch-Funktion.