javascript / expert
Snippet
Benutzerdefinierte asynchrone Generator-Paginierung in Svelte-Reaktivitätsschleifen
Asynchrone Generatoren entkoppeln den Datenabruf vom UI-Konsumenten. Die Kombination aus asynchroner Iteration und Svelte 5 State Runes ermöglicht schrittweise Stream-Updates bei sauberer Steuerung via AbortSignal.
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
export async function* fetchStreamedBatches(endpoint, signal) {let offset = 0;while (!signal.aborted) {const response = await fetch(`${endpoint}?offset=${offset}`, { signal });const { items, hasMore } = await response.json();if (!items.length) break;yield items;if (!hasMore) break;offset += items.length;}}export function createStreamController(endpoint) {let items = $state([]);let loading = $state(false);async function consume(signal) {loading = true;for await (const batch of fetchStreamedBatches(endpoint, signal)) {items = [...items, ...batch];}loading = false;}return { get items() { return items; }, get loading() { return loading; }, consume };}
svelte
Erklärung
1
export async function* fetchStreamedBatches(endpoint, signal) {
Definiert einen asynchronen Generator, der sequenziell Daten-Batches liefert bis zum Abbruch oder Ende.
2
for await (const batch of fetchStreamedBatches(endpoint, signal)) {
Iteriert asynchron über Stream-Häppchen im Takt eintreffender Netzwerk-Antworten.
3
items = [...items, ...batch];
Löst in Svelte feingranulare reaktive Updates durch Anfügen neuer Batch-Elemente aus.