javascript / expert
Snippet
Asynchroner Task-Scheduler für React-Zustandsaktualisierungen mit Fehlerbehebung
Dieses Experten-Snippet baut einen Microtask-basierten asynchronen Batching-Scheduler für React-Zustandssynchronisierungen. Es sammelt asynchrone Zustandsänderungs-Callbacks und führt sie nebenläufig in einer Microtask-Warteschlange aus, wobei Promise.allSettled und AggregateError für eine robuste Fehlerbehandlung genutzt werden.
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
function createAsyncBatcher(onSync) {let queue = [];let isFlushing = false;return async function schedule(task) {queue.push(task);if (isFlushing) return;isFlushing = true;queueMicrotask(async () => {const batch = queue.splice(0);try {const results = await Promise.allSettled(batch.map(fn => fn()));const errors = results.filter(r => r.status === 'rejected');if (errors.length) throw new AggregateError(errors, 'Batch execution failed');onSync(results.map(r => r.value));} catch (err) {console.error('Batch error:', err);} finally {isFlushing = false;}});};}
react
Erklärung
1
function createAsyncBatcher(onSync) {
Factory-Funktion, die einen Callback zur Benachrichtigung von React-Komponentenstatus-Handlern akzeptiert.
2
queueMicrotask(async () => {
Plant die Batch-Verarbeitung am Ende der aktuellen JavaScript-Event-Loop-Microtask-Warteschlange.
3
const results = await Promise.allSettled(batch.map(fn => fn()));
Führt alle ausstehenden asynchronen Operationen gleichzeitig aus, ohne bei einzelnen Fehlern sofort abzubrechen.
4
if (errors.length) throw new AggregateError(errors, 'Batch execution failed');
Bündelt alle erfassten Promise-Fehlschläge in ein einzelnes handhabbares Ausnahme-Objekt.