使用异步速率限制回调
函数: useAsyncRateLimitedCallback()
ts
function useAsyncRateLimitedCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>
function useAsyncRateLimitedCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>
定义于: react-pacer/src/async-rate-limiter/useAsyncRateLimitedCallback.ts:59
一个 React 钩子，用于创建一个异步回调函数的速率限制版本。这个钩子是 useAsyncRateLimiter 钩子方便的封装，它为在 React 组件中使用提供了一个稳定、异步速率限制的函数引用。
异步速率限制是一种对异步函数的“硬限制”方法：它允许所有调用直到达到限制，然后阻止（拒绝）后续的调用，直到窗口重置。与节流或防抖不同，它不尝试间隔或合并调用。这可能导致快速执行的爆发，然后是所有调用都被阻止的时期。
异步速率限制器支持两种类型的窗口
- 'fixed': 一个严格的窗口，在窗口期后重置。窗口内的所有执行都会计入限制，并且窗口会在期满后完全重置。
- 'sliding': 一个滚动窗口，允许在旧的执行过期时进行新的执行。这提供了更一致的执行速率。
为了更平滑的执行模式，请考虑
- useAsyncThrottledCallback: 当您希望在执行之间保持一致的间隔时（例如 UI 更新）
- useAsyncDebouncedCallback: 当您想将快速调用合并为一次执行时（例如搜索输入框）
异步速率限制主要应用于您需要强制执行严格的异步操作限制时，例如 API 速率限制或其他需要对执行频率进行硬性限制的场景。
与 useAsyncRateLimiter 相比，这个钩子提供了一个更简单的 API，使其成为基本异步速率限制需求的理想选择。但是，它不暴露底层的 AsyncRateLimiter 实例。
对于需要以下功能的进阶用法
- 手动取消
- 访问执行计数
- 自定义 useCallback 依赖项
考虑改用 useAsyncRateLimiter 钩子。
类型参数
• TFn extends AnyAsyncFunction
参数
fn
TFn
options
AsyncRateLimiterOptions<TFn>
Returns (返回)
Function
参数
args
...Parameters<TFn>
Returns (返回)
Promise<ReturnType<TFn>>
示例
tsx
// Rate limit async API calls to maximum 5 calls per minute with a sliding window
const makeApiCall = useAsyncRateLimitedCallback(
async (data: ApiData) => {
return fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) });
},
{
limit: 5,
window: 60000, // 1 minute
windowType: 'sliding',
onReject: () => {
console.warn('API rate limit reached. Please wait before trying again.');
}
}
);
// Rate limit async API calls to maximum 5 calls per minute with a sliding window
const makeApiCall = useAsyncRateLimitedCallback(
async (data: ApiData) => {
return fetch('/api/endpoint', { method: 'POST', body: JSON.stringify(data) });
},
{
limit: 5,
window: 60000, // 1 minute
windowType: 'sliding',
onReject: () => {
console.warn('API rate limit reached. Please wait before trying again.');
}
}
);
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。