Framework
Version
Debouncer API Referenz
Throttler API Referenz
Rate Limiter API Referenz
Queue API Referenz
Batcher API Referenz

createAsyncThrottler

Funktion: createAsyncThrottler()

ts
function createAsyncThrottler<TFn, TSelected>(
   fn, 
   initialOptions, 
selector): SolidAsyncThrottler<TFn, TSelected>
function createAsyncThrottler<TFn, TSelected>(
   fn, 
   initialOptions, 
selector): SolidAsyncThrottler<TFn, TSelected>

Definiert in: async-throttler/createAsyncThrottler.ts:117

Ein Low-Level-Solid-Hook, der eine AsyncThrottler-Instanz erstellt, um zu begrenzen, wie oft eine asynchrone Funktion ausgeführt werden kann.

Dieser Hook ist darauf ausgelegt, flexibel und zustandsverwaltung-agnostisch zu sein – er gibt einfach eine Throttler-Instanz zurück, die Sie mit jeder Zustandsverwaltungslösung (createSignal, etc.) integrieren können.

Asynchrones Throttling stellt sicher, dass eine asynchrone Funktion höchstens einmal innerhalb eines bestimmten Zeitfensters ausgeführt wird, unabhängig davon, wie oft sie aufgerufen wird. Dies ist nützlich für die Ratenbegrenzung von teuren API-Aufrufen, Datenbankoperationen oder anderen asynchronen Aufgaben.

Im Gegensatz zum nicht-asynchronen Throttler unterstützt diese asynchrone Version die Rückgabe von Werten aus der gedrosselten Funktion, was sie ideal für API-Aufrufe und andere asynchrone Operationen macht, bei denen Sie das Ergebnis des maybeExecute-Aufrufs anstelle des Setzens des Ergebnisses auf einer Zustandsvariable innerhalb der gedrosselten Funktion wünschen.

Fehlerbehandlung

  • Wenn ein onError-Handler bereitgestellt wird, wird dieser mit dem Fehler und der Throttler-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 AsyncThrottler-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

  • canLeadingExecute: Ob der Throttler am Anfang ausführen kann
  • canTrailingExecute: Ob der Throttler am Ende ausführen kann
  • executionCount: Anzahl der abgeschlossenen Funktionsaufrufe
  • hasError: Ob die letzte Ausführung zu einem Fehler geführt hat
  • isPending: Ob der Throttler auf den Timeout wartet, um die Ausführung auszulösen
  • isExecuting: Ob die Ausführung einer asynchronen Funktion gerade läuft
  • lastArgs: Die Argumente des letzten Aufrufs von maybeExecute
  • lastError: Der Fehler der letzten fehlgeschlagenen Ausführung (falls vorhanden)
  • lastExecutionTime: Zeitstempel der letzten Ausführung
  • lastResult: Das Ergebnis der letzten erfolgreichen Ausführung
  • nextExecutionTime: Zeitstempel der nächsten erlaubten Ausführung
  • status: Aktueller Ausführungsstatus ('disabled' | 'idle' | 'pending' | 'executing')

Typparameter

TFn extends AnyAsyncFunction

TSelected = {}

Parameter

fn

TFn

initialOptions

AsyncThrottlerOptions<TFn>

selector

(state) => TSelected

Gibt zurück

SolidAsyncThrottler<TFn, TSelected>

Beispiel

tsx
// Default behavior - no reactive state subscriptions
const { maybeExecute } = createAsyncThrottler(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data;
  },
  { wait: 1000 }
);

// Opt-in to re-render when isPending or isExecuting changes (optimized for loading states)
const throttler = createAsyncThrottler(
  async (query) => {
    const result = await searchAPI(query);
    return result;
  },
  { wait: 2000 },
  (state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })
);

// Opt-in to re-render when error state changes (optimized for error handling)
const throttler = createAsyncThrottler(
  async (query) => {
    const result = await searchAPI(query);
    return result;
  },
  {
    wait: 2000,
    leading: true,   // Execute immediately on first call
    trailing: false, // Skip trailing edge updates
    onError: (error) => {
      console.error('API call failed:', error);
    }
  },
  (state) => ({ hasError: state.hasError, lastError: state.lastError })
);

// Access the selected state (will be empty object {} unless selector provided)
const { isPending, isExecuting } = throttler.state();
// Default behavior - no reactive state subscriptions
const { maybeExecute } = createAsyncThrottler(
  async (id: string) => {
    const data = await api.fetchData(id);
    return data;
  },
  { wait: 1000 }
);

// Opt-in to re-render when isPending or isExecuting changes (optimized for loading states)
const throttler = createAsyncThrottler(
  async (query) => {
    const result = await searchAPI(query);
    return result;
  },
  { wait: 2000 },
  (state) => ({ isPending: state.isPending, isExecuting: state.isExecuting })
);

// Opt-in to re-render when error state changes (optimized for error handling)
const throttler = createAsyncThrottler(
  async (query) => {
    const result = await searchAPI(query);
    return result;
  },
  {
    wait: 2000,
    leading: true,   // Execute immediately on first call
    trailing: false, // Skip trailing edge updates
    onError: (error) => {
      console.error('API call failed:', error);
    }
  },
  (state) => ({ hasError: state.hasError, lastError: state.lastError })
);

// Access the selected state (will be empty object {} unless selector provided)
const { isPending, isExecuting } = throttler.state();
Unsere Partner
Code Rabbit
Unkey
Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.

Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.