框架
版本
防抖器 API 参考
节流器 API 参考
速率限制器 API 参考
队列 API 参考
批处理器 API 参考

createAsyncQueuer

函数: createAsyncQueuer()

ts
function createAsyncQueuer<TValue, TSelected>(
   fn, 
   initialOptions, 
selector): SolidAsyncQueuer<TValue, TSelected>
function createAsyncQueuer<TValue, TSelected>(
   fn, 
   initialOptions, 
selector): SolidAsyncQueuer<TValue, TSelected>

定义于: async-queuer/createAsyncQueuer.ts:120

创建一个兼容 Solid 的 AsyncQueuer 实例,用于管理异步项目队列,并暴露所有状态属性的 Solid 信号。

特性

  • 通过 getPriority 或项目 priority 属性进行优先级队列
  • 可配置的并发限制
  • FIFO(先进先出)或 LIFO(后进先出)队列行为
  • 暂停/恢复处理
  • 任务取消
  • 项目过期
  • 成功、错误、完成、项目更改等的生命周期回调
  • 所有状态属性(活动项目、待处理项目、计数等)都作为 Solid 信号暴露,以便响应

任务最多以配置的并发限制并行处理。当任务完成时,如果并发限制允许,将处理下一个待处理任务。

错误处理

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

状态管理和选择器

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

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

可用的状态属性

  • activeItems: 当前正在处理的项目数组
  • errorCount: 处理失败的项目数量
  • isRunning: 队列器当前是否正在运行(未停止)
  • pendingItems: 等待处理的项目数组
  • rejectionCount: 被拒绝(已过期或验证失败)的项目数量
  • settleCount: 已完成处理(成功或失败)的项目数量
  • successCount: 成功处理的项目数量

用法示例

tsx
// Default behavior - no reactive state subscriptions
const asyncQueuer = createAsyncQueuer(async (item) => {
  // process item
  return await fetchData(item);
}, {
  initialItems: [],
  concurrency: 2,
  maxSize: 100,
  started: false,
  onSuccess: (result) => {
    console.log('Item processed:', result);
  },
  onError: (error) => {
    console.error('Processing failed:', error);
  }
});

// Opt-in to re-render when queue state changes (optimized for UI updates)
const asyncQueuer = createAsyncQueuer(
  async (item) => await fetchData(item),
  { concurrency: 2, started: true },
  (state) => ({
    pendingItems: state.pendingItems,
    activeItems: state.activeItems,
    isRunning: state.isRunning
  })
);

// Opt-in to re-render when processing metrics change (optimized for tracking progress)
const asyncQueuer = createAsyncQueuer(
  async (item) => await fetchData(item),
  { concurrency: 2, started: true },
  (state) => ({
    successCount: state.successCount,
    errorCount: state.errorCount,
    settleCount: state.settleCount
  })
);

// Add items to queue
asyncQueuer.addItem(newItem);

// Start processing
asyncQueuer.start();

// Access the selected state (will be empty object {} unless selector provided)
const { pendingItems, activeItems } = asyncQueuer.state();
// Default behavior - no reactive state subscriptions
const asyncQueuer = createAsyncQueuer(async (item) => {
  // process item
  return await fetchData(item);
}, {
  initialItems: [],
  concurrency: 2,
  maxSize: 100,
  started: false,
  onSuccess: (result) => {
    console.log('Item processed:', result);
  },
  onError: (error) => {
    console.error('Processing failed:', error);
  }
});

// Opt-in to re-render when queue state changes (optimized for UI updates)
const asyncQueuer = createAsyncQueuer(
  async (item) => await fetchData(item),
  { concurrency: 2, started: true },
  (state) => ({
    pendingItems: state.pendingItems,
    activeItems: state.activeItems,
    isRunning: state.isRunning
  })
);

// Opt-in to re-render when processing metrics change (optimized for tracking progress)
const asyncQueuer = createAsyncQueuer(
  async (item) => await fetchData(item),
  { concurrency: 2, started: true },
  (state) => ({
    successCount: state.successCount,
    errorCount: state.errorCount,
    settleCount: state.settleCount
  })
);

// Add items to queue
asyncQueuer.addItem(newItem);

// Start processing
asyncQueuer.start();

// Access the selected state (will be empty object {} unless selector provided)
const { pendingItems, activeItems } = asyncQueuer.state();

类型参数

TValue

TSelected = {}

参数

fn

(value) => Promise<any>

initialOptions

AsyncQueuerOptions<TValue> = {}

选择器

(state) => TSelected

Returns (返回)

SolidAsyncQueuer<TValue, TSelected>

我们的合作伙伴
Code Rabbit
Unkey
订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。

订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。