使用异步批处理回调
函数: useAsyncBatchedCallback()
ts
function useAsyncBatchedCallback<TFn>(fn, options): (...args) => Promise<void>
function useAsyncBatchedCallback<TFn>(fn, options): (...args) => Promise<void>
定义于: react-pacer/src/async-batcher/useAsyncBatchedCallback.ts:43
一个 React Hook，用于创建一个异步回调函数的批量处理版本。此 Hook 是对 useAsyncBatcher Hook 的便捷封装，为 React 组件提供了一个稳定、批量化的异步函数引用。
批量处理的异步函数会将单个调用收集到批次中，并在满足批次条件（达到最大数量、经过等待时间或自定义逻辑）时执行它们。返回的函数始终返回一个解析为 undefined 的 Promise（因为批次函数会一起处理多个项目）。
与 useAsyncBatcher 相比，此 Hook 提供了更简单的 API，非常适合基本异步批处理需求。但是，它不公开底层的 AsyncBatcher 实例。
对于需要以下功能的进阶用法
- 手动执行批处理
- 访问批处理结果和状态
- 自定义 useCallback 依赖项
请考虑改用 useAsyncBatcher Hook。
类型参数
• TFn extends AnyAsyncFunction
参数
fn
(items) => Promise<any>
options
AsyncBatcherOptions<Parameters<TFn>[0]>
Returns (返回)
Function
参数
args
...Parameters<TFn>
Returns (返回)
Promise<void>
示例
tsx
// Batch API requests
const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {
const results = await Promise.all(requests.map(req => fetch(req.url)));
return results.map(res => res.json());
}, {
maxSize: 10, // Process when 10 requests collected
wait: 1000 // Or after 1 second
});
// Use in event handlers
<button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>
Track Event
</button>
// Batch API requests
const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {
const results = await Promise.all(requests.map(req => fetch(req.url)));
return results.map(res => res.json());
}, {
maxSize: 10, // Process when 10 requests collected
wait: 1000 // Or after 1 second
});
// Use in event handlers
<button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>
Track Event
</button>
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。