javascript / expert
Snippet
Suspense-kompatibler Streaming Async Iterable Reader
Wandelt einen JavaScript AsyncIterableIterator in einen React-Suspense-Ressourcenmechanismus um. Durch das Werfen ausstehender Promises während der Iteration und das Speichern erfüllter Werte verbindet er asynchrone Stream-Verarbeitung mit dem Suspense-Rendering von React.
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
function wrapAsyncIterable(asyncIterable) {const iterator = asyncIterable[Symbol.asyncIterator]();let status = 'pending';let result;let suspender = iterator.next().then(res => { status = 'fulfilled'; result = res; },err => { status = 'rejected'; result = err; });return {readNext() {if (status === 'pending') throw suspender;if (status === 'rejected') throw result;if (result.done) return { done: true };const current = result.value;status = 'pending';suspender = iterator.next().then(res => { status = 'fulfilled'; result = res; },err => { status = 'rejected'; result = err; });return { done: false, value: current };}};}
react
Erklärung
1
const iterator = asyncIterable[Symbol.asyncIterator]();
Ruft die native asynchrone Iterator-Instanz über das vordefinierte Symbol Symbol.asyncIterator ab.
2
if (status === 'pending') throw suspender;
Wirft das aktive ausstehende Promise, um die Fallback-UI der React-Suspense-Grenze auszulösen.
3
if (status === 'rejected') throw result;
Wirft erfasste Iterator-Fehler direkt in React Error Boundaries erneut.
4
suspender = iterator.next().then(...)
Rückt den Iterator vor, um nachfolgende Streaming-Häppchen abzurufen, und aktualisiert den internen Status.