useAsyncQueuedState

函数：useAsyncQueuedState()

function useAsyncQueuedState<TValue>(fn, options): [TValue[], AsyncQueuer<TValue>]

function useAsyncQueuedState<TValue>(fn, options): [TValue[], AsyncQueuer<TValue>]

定义于：react-pacer/src/async-queuer/useAsyncQueuedState.ts:53

一个较高级别的 React 钩子，用于创建一个具有内置状态管理的 AsyncQueuer 实例。

此钩子将 AsyncQueuer 与 React 状态相结合，以自动跟踪队列项目。它返回一个包含以下内容的元组：

当前排队项目的数组（作为 React 状态）
具有控制队列方法的队列器实例

队列可以配置为：

最大并发操作数
最大队列大小
队列项目的处理函数
各种生命周期回调

每当项目发生以下情况时，状态将自动更新：

添加到队列
从队列中删除
开始处理
完成处理

类型参数

• TValue

参数

fn

(value) => Promise<any>

options

AsyncQueuerOptions<TValue> = {}

[TValue[], AsyncQueuer<TValue>]

示例

tsx

// 创建具有状态管理的队列
const [queueItems, asyncQueuer] = useAsyncQueuedState({
  concurrency: 2,
  maxSize: 100,
  started: true
});

// 将项目添加到队列 - 状态自动更新
asyncQueuer.addItem(async () => {
  const result = await fetchData();
  return result;
});

// 开始处理
asyncQueuer.start();

// 停止处理
asyncQueuer.stop();

// queueItems 反映当前的队列状态
const pendingCount = asyncQueuer.peekPendingItems().length;

// 创建具有状态管理的队列
const [queueItems, asyncQueuer] = useAsyncQueuedState({
  concurrency: 2,
  maxSize: 100,
  started: true
});

// 将项目添加到队列 - 状态自动更新
asyncQueuer.addItem(async () => {
  const result = await fetchData();
  return result;
});

// 开始处理
asyncQueuer.start();

// 停止处理
asyncQueuer.stop();

// queueItems 反映当前的队列状态
const pendingCount = asyncQueuer.peekPendingItems().length;