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 信号。
特性
任务最多以配置的并发限制并行处理。当任务完成时,如果并发限制允许,将处理下一个待处理任务。
错误处理
该钩子使用 TanStack Store 进行响应式状态管理。selector 参数允许您指定哪些状态更改将触发重新渲染,通过防止不相关的状态更改发生不必要的重新渲染来优化性能。
默认情况下,不会进行响应式状态订阅,您必须通过提供 selector 函数来选择跟踪状态。这可以防止不必要的重新渲染,并让您完全控制组件何时更新。只有当您提供 selector 时,组件才会根据所选状态值的变化重新渲染。
可用的状态属性
用法示例
// 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 = {}
(value) => Promise<any>
AsyncQueuerOptions<TValue> = {}
(state) => TSelected
SolidAsyncQueuer<TValue, TSelected>
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。