useAsyncQueuer
Funktion: useAsyncQueuer()
ts
function useAsyncQueuer<TValue, TSelected>(
fn,
options,
selector): ReactAsyncQueuer<TValue, TSelected>
function useAsyncQueuer<TValue, TSelected>(
fn,
options,
selector): ReactAsyncQueuer<TValue, TSelected>
Definiert in: react-pacer/src/async-queuer/useAsyncQueuer.ts:167
Ein untergeordneter React-Hook, der eine AsyncQueuer-Instanz zur Verwaltung einer asynchronen Aufgabenwarteschlange erstellt.
Merkmale
- Prioritätswarteschlangenunterstützung über die Option getPriority
- Konfigurierbare Nebenläufigkeitsgrenze
- Rückrufe für Aufgaben-Erfolg/Fehler/Abschluss
- FIFO (First In First Out) oder LIFO (Last In First Out) Warteschlangenverhalten
- Pausieren/Fortsetzen der Aufgabenverarbeitung
- Aufgabenabbruch
- Ablauf von Elementen zum Löschen veralteter Elemente aus der Warteschlange
Aufgaben werden parallel bis zum konfigurierten Parallelitätslimit verarbeitet. Wenn eine Aufgabe abgeschlossen ist, wird die nächste ausstehende Aufgabe verarbeitet, wenn sie unter dem Parallelitätslimit liegt.
Fehlerbehandlung
- Wenn ein onError Handler bereitgestellt wird, wird dieser mit dem Fehler und der Queuer-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 mit der zugrunde liegenden AsyncQueuer-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
- activeItems: Derzeit vom Queuer verarbeitete Elemente
- errorCount: Anzahl der Aufgabenausführungen, die zu Fehlern geführt haben
- expirationCount: Anzahl der Elemente, die aufgrund des Ablaufs entfernt wurden
- isEmpty: Ob der Queuer keine zu verarbeitenden Elemente hat
- isFull: Ob der Queuer seine maximale Kapazität erreicht hat
- isIdle: Ob der Queuer gerade keine Elemente verarbeitet
- isRunning: Ob der Queuer aktiv ist und Elemente automatisch verarbeitet
- items: Array von Elementen, die derzeit auf die Verarbeitung warten
- itemTimestamps: Zeitstempel, wann Elemente für die Ablaufverfolgung hinzugefügt wurden
- lastResult: Das Ergebnis der zuletzt ausgeführten Aufgabe
- pendingTick: Ob der Queuer einen ausstehenden Timeout für die Verarbeitung des nächsten Elements hat
- rejectionCount: Anzahl der Elemente, die bei der Hinzufügung abgelehnt wurden
- settledCount: Anzahl der abgeschlossenen Aufgabenausführungen (Erfolg oder Fehler)
- size: Anzahl der Elemente, die sich derzeit in der Warteschlange befinden
- status: Aktueller Verarbeitungsstatus ('idle' | 'running' | 'stopped')
- successCount: Anzahl der erfolgreich abgeschlossenen Aufgabenausführungen
Typparameter
• TValue
• TSelected = {}
Parameter
fn
(value) => Promise<any>
optionen
AsyncQueuerOptions<TValue> = {}
selector
(state) => TSelected
Gibt zurück
ReactAsyncQueuer<TValue, TSelected>
Beispiel
tsx
// Default behavior - no reactive state subscriptions
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: false }
);
// Opt-in to re-render when queue size changes (optimized for displaying queue length)
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: false },
(state) => ({
size: state.size,
isEmpty: state.isEmpty,
isFull: state.isFull
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: false },
(state) => ({
isRunning: state.isRunning,
isIdle: state.isIdle,
status: state.status,
activeItems: state.activeItems,
pendingTick: state.pendingTick
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: false },
(state) => ({
successCount: state.successCount,
errorCount: state.errorCount,
settledCount: state.settledCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Opt-in to re-render when results are available (optimized for data display)
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{
concurrency: 2,
maxSize: 100,
started: false,
onSuccess: (result) => {
console.log('Item processed:', result);
},
onError: (error) => {
console.error('Processing failed:', error);
}
},
(state) => ({
lastResult: state.lastResult,
successCount: state.successCount
})
);
// Add items to queue
asyncQueuer.addItem(newItem);
// Start processing
asyncQueuer.start();
// Access the selected state (will be empty object {} unless selector provided)
const { size, isRunning, activeItems } = asyncQueuer.state;
// Default behavior - no reactive state subscriptions
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: false }
);
// Opt-in to re-render when queue size changes (optimized for displaying queue length)
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: false },
(state) => ({
size: state.size,
isEmpty: state.isEmpty,
isFull: state.isFull
})
);
// Opt-in to re-render when processing state changes (optimized for loading indicators)
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: false },
(state) => ({
isRunning: state.isRunning,
isIdle: state.isIdle,
status: state.status,
activeItems: state.activeItems,
pendingTick: state.pendingTick
})
);
// Opt-in to re-render when execution metrics change (optimized for stats display)
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{ concurrency: 2, maxSize: 100, started: false },
(state) => ({
successCount: state.successCount,
errorCount: state.errorCount,
settledCount: state.settledCount,
expirationCount: state.expirationCount,
rejectionCount: state.rejectionCount
})
);
// Opt-in to re-render when results are available (optimized for data display)
const asyncQueuer = useAsyncQueuer(
async (item) => {
const result = await processItem(item);
return result;
},
{
concurrency: 2,
maxSize: 100,
started: false,
onSuccess: (result) => {
console.log('Item processed:', result);
},
onError: (error) => {
console.error('Processing failed:', error);
}
},
(state) => ({
lastResult: state.lastResult,
successCount: state.successCount
})
);
// Add items to queue
asyncQueuer.addItem(newItem);
// Start processing
asyncQueuer.start();
// Access the selected state (will be empty object {} unless selector provided)
const { size, isRunning, activeItems } = asyncQueuer.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.