函数：useAsyncQueuer()

function useAsyncQueuer<TValue, TSelected>(
   fn, 
   options, 
selector): ReactAsyncQueuer<TValue, TSelected>

function useAsyncQueuer<TValue, TSelected>(
   fn, 
   options, 
selector): ReactAsyncQueuer<TValue, TSelected>

定义于：react-pacer/src/async-queuer/useAsyncQueuer.ts:167

一个更底层的 React hook，用于创建一个 AsyncQueuer 实例来管理异步任务队列。

特性

通过 getPriority 选项支持优先级队列
可配置的并发限制
任务成功/失败/完成回调
FIFO（先进先出）或 LIFO（后进先出）队列行为
暂停/恢复任务处理
任务取消
项目过期，用于清除队列中的陈旧项目

任务会以配置的并发限制并行处理。当一个任务完成时，如果低于并发限制，下一个待处理的任务就会被处理。

错误处理

如果提供了 onError 处理程序，它将接收错误和 queuer 实例作为参数。
如果 throwOnError 为 true（当没有提供 onError 处理程序时的默认值），错误将被抛出
如果 throwOnError 为 false（当提供 onError 处理程序时的默认值），错误将被吞没
onError 和 throwOnError 可以一起使用 - 在任何错误被抛出之前，处理程序都会被调用
可以使用底层的 AsyncQueuer 实例来检查错误状态。

状态管理和选择器

该 hook 使用 TanStack Store 进行响应式状态管理。selector 参数允许您指定哪些状态更改将触发重新渲染，通过防止不相关状态更改时的不必要重新渲染来优化性能。

默认情况下，不会有响应式状态订阅，您必须通过提供一个 selector 函数来选择跟踪状态。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供一个 selector 时，组件才会在选定的状态值发生变化时重新渲染。

可用的状态属性

activeItems：当前由队列器处理的项目
errorCount：导致错误的任务执行次数
expirationCount：因过期而移除的项目数量
isEmpty：Queuer 是否没有要处理的项目
isFull：queuer 是否已达到最大容量
isIdle：queuer 当前是否未处理任何项目
isRunning：queuer 是否处于活动状态并会自动处理项目
items：当前等待处理的项目数组
itemTimestamps：添加项目以进行过期跟踪的时间戳
lastResult：最近一次任务执行的结果
pendingTick：queuer 是否有待处理的下一项处理超时
rejectionCount：被拒绝添加的项目数量
settledCount：已完成（成功或失败）的任务执行次数
size：当前队列中的项目数
status：当前处理状态（“idle” | “running” | “stopped”）
successCount：成功完成的任务执行次数

类型参数

• TValue

• TSelected = {}

参数

fn

(value) => Promise<any>

options

AsyncQueuerOptions<TValue> = {}

选择器

(state) => TSelected

Returns (返回)

ReactAsyncQueuer<TValue, TSelected>

示例

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;

使用异步排队器