如何使用RxJS限流异步请求？批量数据分页发送实现

刚好之前处理过类似的批量请求限流场景，用RxJS来实现简直是量身定做！我来帮你把这段思路补全优化，让它能稳定跑起来：

先把核心参数理清楚，这些是整个逻辑的基础：

// 服务端规定的单请求最大条目数
const maxItemsPerRequest = 350;
// 服务端每分钟允许接收的总条目数（你需要替换成实际限制值）
const maxPerMinute = 1000;
// 计算每次请求的间隔时间（毫秒）—— 确保每分钟总发送量不超限
const intervalMs = Math.round((60 * 1000) / (maxPerMinute / maxItemsPerRequest));
// 你的待发送数据总条数
const totalItems = 1500; // 替换成实际数据量
// 计算需要分多少页发送
const totalPages = Math.ceil(totalItems / maxItemsPerRequest);

接下来用RxJS创建一个按间隔触发的Observable，用来精准控制请求节奏：

import { interval } from 'rxjs';
import { take, map } from 'rxjs/operators';

// 创建Observable：每隔intervalMs毫秒触发一次，总共触发totalPages次
const pageTrigger$ = interval(intervalMs).pipe(
  take(totalPages),
  map(pageIndex => pageIndex) // 拿到当前页码索引（从0开始计数）
);

最后在订阅时，根据页码截取对应数据并发送请求：

pageTrigger$.subscribe({
  next: (pageIndex) => {
    // 计算当前页的起止索引
    const startIdx = pageIndex * maxItemsPerRequest;
    const endIdx = Math.min(startIdx + maxItemsPerRequest, totalItems);
    // 从数据源中截取当前页的数据（yourDataSource是你的原始数据数组）
    const currentPageData = yourDataSource.slice(startIdx, endIdx);

    // 发送请求到服务端，这里用fetch举例，你可以换成axios等工具
    fetch('/your-api-endpoint', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(currentPageData)
    })
    .then(res => {
      if (!res.ok) throw new Error(`请求失败: ${res.status}`);
      return res.json();
    })
    .then(resData => {
      console.log(`第${pageIndex + 1}页发送成功`, resData);
      // 这里可以加进度更新、成功回调等逻辑
    })
    .catch(err => {
      console.error(`第${pageIndex + 1}页发送失败`, err);
      // 可选：添加重试逻辑，比如用RxJS的retry操作符，或者手动重试
    });
  },
  complete: () => {
    console.log('所有分页请求已全部发送完成！');
    // 全部完成后的收尾逻辑，比如通知用户、清理资源等
  },
  error: (err) => {
    console.error('触发Observable时出现错误', err);
  }
});

几个实用优化点： #

• 错误重试：如果担心网络波动导致请求失败，可以在pageTrigger$的pipe里加入retry(2)（最多重试2次），或者在catch里手动触发重试。
• 并发控制：如果服务端允许少量并发，可结合concatMap/mergeMap控制并发数，但要确保总发送量不超每分钟限制。
• 进度跟踪：可以在next回调里更新进度条或日志，方便实时查看发送进度。
• 动态调整间隔：如果服务端限制可能变化，可以把间隔计算逻辑做成动态可配置的，不用写死常量。

这个方案的核心是用RxJS的interval严格控制请求间隔，既保证单请求不超350条，也确保每分钟总发送量符合服务端限制，完全适配你的需求~

内容的提问来源于stack exchange，提问作者andrucz