useAsyncBatcher
Funktion: useAsyncBatcher()
ts
function useAsyncBatcher<TValue, TSelected>(
fn,
options,
selector): ReactAsyncBatcher<TValue, TSelected>
function useAsyncBatcher<TValue, TSelected>(
fn,
options,
selector): ReactAsyncBatcher<TValue, TSelected>
Definiert in: react-pacer/src/async-batcher/useAsyncBatcher.ts:167
Ein React-Hook, der eine AsyncBatcher-Instanz zur Verwaltung asynchroner Stapel von Elementen erstellt.
Dies ist die asynchrone Version des useBatcher-Hooks. Im Gegensatz zur synchronen Version ist dieser asynchrone Batcher
- Verarbeitet Promises und gibt Ergebnisse von Stapelausführungen zurück
- Bietet Fehlerbehandlung mit konfigurierbarem Fehlerverhalten
- Zählt Erfolgs-, Fehler- und Abschlusszählungen separat
- Hat eine Zustandsverfolgung, wenn Stapel ausgeführt werden
- Gibt das Ergebnis der Ausführung der Stapelfunktion zurück
Merkmale
- Konfigurierbare Stapelgröße und Wartezeit
- Benutzerdefinierte Batch-Verarbeitungslogik über getShouldExecute
- Event-Callbacks zur Überwachung von Batch-Operationen
- Fehlerbehandlung für fehlgeschlagene Stapelvorgänge
- Automatische oder manuelle Stapelverarbeitung
Der Batcher sammelt Elemente und verarbeitet sie in Stapeln basierend auf
- Maximaler Batch-Größe (Anzahl der Elemente pro Batch)
- Zeitbasierte Batching (Verarbeitung nach X Millisekunden)
- Benutzerdefinierte Batch-Verarbeitungslogik über getShouldExecute
Fehlerbehandlung
- Wenn ein onError-Handler bereitgestellt wird, wird er mit dem Fehler und der Batcher-Instanz aufgerufen
- Wenn throwOnError auf true gesetzt ist (Standardwert, wenn kein onError-Handler bereitgestellt wird), wird der Fehler ausgelöst.
- Wenn throwOnError auf false gesetzt ist (Standardwert, wenn ein onError-Handler bereitgestellt wird), wird der Fehler "verschluckt".
- Sowohl onError als auch throwOnError können zusammen verwendet werden – der Handler wird aufgerufen, bevor ein Fehler ausgelöst wird.
- Der Fehlerzustand kann über die zugrunde liegende AsyncBatcher-Instanz überprüft werden
Zustandsverwaltung und Selektor
Der Hook verwendet TanStack Store für reaktives Zustandsmanagement. Der Parameter selector ermöglicht es Ihnen anzugeben, welche Zustandsänderungen ein erneutes Rendern auslösen, wodurch die Leistung optimiert wird, indem unnötige erneute Renderings verhindert werden, wenn irrelevante Zustandsänderungen auftreten.
Standardmäßig erfolgen keine reaktiven Zustands-Subscriptions und Sie müssen das Zustands-Tracking durch Bereitstellen einer Selector-Funktion aktivieren. Dies verhindert unnötige Renderings und gibt Ihnen die volle Kontrolle darüber, wann Ihre Komponente aktualisiert wird. Nur wenn Sie einen Selector bereitstellen, wird die Komponente neu gerendert, wenn sich die ausgewählten Zustandswerte ändern.
Verfügbare Zustandseigenschaften
- errorCount: Anzahl der Stapelausführungen, die zu Fehlern geführt haben
- failedItems: Array von Elementen, die während der Stapelverarbeitung fehlgeschlagen sind
- isEmpty: Gibt an, ob der Batcher keine zu verarbeitenden Elemente hat
- isExecuting: Gibt an, ob ein Stapel gerade asynchron verarbeitet wird
- isPending: Gibt an, ob der Batcher auf den Timeout wartet, um die Stapelverarbeitung auszulösen
- isRunning: Gibt an, ob der Batcher aktiv ist und Elemente automatisch verarbeitet
- items: Array von Elementen, die derzeit zur Stapelverarbeitung in der Warteschlange stehen
- lastResult: Das Ergebnis der letzten Stapelausführung
- settleCount: Anzahl der Stapelausführungen, die abgeschlossen wurden (Erfolg oder Fehler)
- size: Anzahl der Elemente, die sich derzeit in der Stapelwarteschlange befinden
- status: Aktueller Verarbeitungsstatus ('idle' | 'pending' | 'executing' | 'populated')
- successCount: Anzahl der Stapelausführungen, die erfolgreich abgeschlossen wurden
- totalItemsProcessed: Gesamtzahl der über alle Stapel verarbeiteten Elemente
- totalItemsFailed: Gesamtzahl der Elemente, deren Verarbeitung fehlgeschlagen ist
Typparameter
• TValue
• TSelected = {}
Parameter
fn
(items) => Promise<any>
optionen
AsyncBatcherOptions<TValue> = {}
selector
(state) => TSelected
Gibt zurück
ReactAsyncBatcher<TValue, TSelected>
Beispiel
tsx
// Basic async batcher for API requests - no reactive state subscriptions
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{ maxSize: 10, wait: 2000 }
);
// Opt-in to re-render when execution state changes (optimized for loading indicators)
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{ maxSize: 10, wait: 2000 },
(state) => ({
isExecuting: state.isExecuting,
isPending: state.isPending,
status: state.status
})
);
// Opt-in to re-render when results are available (optimized for data display)
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{ maxSize: 10, wait: 2000 },
(state) => ({
lastResult: state.lastResult,
successCount: state.successCount,
totalItemsProcessed: state.totalItemsProcessed
})
);
// Opt-in to re-render when error state changes (optimized for error handling)
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{
maxSize: 10,
wait: 2000,
onError: (error) => console.error('Batch processing failed:', error)
},
(state) => ({
errorCount: state.errorCount,
failedItems: state.failedItems,
totalItemsFailed: state.totalItemsFailed
})
);
// Complete example with all callbacks
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{
maxSize: 10,
wait: 2000,
onSuccess: (result) => {
console.log('Batch processed successfully:', result);
},
onError: (error) => {
console.error('Batch processing failed:', error);
}
}
);
// Add items to batch
asyncBatcher.addItem(newItem);
// Manually execute batch
const result = await asyncBatcher.execute();
// Access the selected state (will be empty object {} unless selector provided)
const { isExecuting, lastResult, size } = asyncBatcher.state;
// Basic async batcher for API requests - no reactive state subscriptions
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{ maxSize: 10, wait: 2000 }
);
// Opt-in to re-render when execution state changes (optimized for loading indicators)
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{ maxSize: 10, wait: 2000 },
(state) => ({
isExecuting: state.isExecuting,
isPending: state.isPending,
status: state.status
})
);
// Opt-in to re-render when results are available (optimized for data display)
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{ maxSize: 10, wait: 2000 },
(state) => ({
lastResult: state.lastResult,
successCount: state.successCount,
totalItemsProcessed: state.totalItemsProcessed
})
);
// Opt-in to re-render when error state changes (optimized for error handling)
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{
maxSize: 10,
wait: 2000,
onError: (error) => console.error('Batch processing failed:', error)
},
(state) => ({
errorCount: state.errorCount,
failedItems: state.failedItems,
totalItemsFailed: state.totalItemsFailed
})
);
// Complete example with all callbacks
const asyncBatcher = useAsyncBatcher(
async (items) => {
const results = await Promise.all(items.map(item => processItem(item)));
return results;
},
{
maxSize: 10,
wait: 2000,
onSuccess: (result) => {
console.log('Batch processed successfully:', result);
},
onError: (error) => {
console.error('Batch processing failed:', error);
}
}
);
// Add items to batch
asyncBatcher.addItem(newItem);
// Manually execute batch
const result = await asyncBatcher.execute();
// Access the selected state (will be empty object {} unless selector provided)
const { isExecuting, lastResult, size } = asyncBatcher.state;
Unsere Partner
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.