RxJS：优化基于Interval且需等待HTTP请求完成的轮询方案

优化方案：使用RxJS exhaustMap 实现优雅的请求节流 #

核心思路是利用RxJS内置的exhaustMap操作符，它专门处理「等待内部异步操作完成后，再响应下一个外部事件」的场景，完全匹配你的需求，而且不需要额外维护状态变量。

优化后的代码如下：

import { of, interval, timer, combineLatest } from 'rxjs';
import { tap, exhaustMap } from 'rxjs/operators';

// 每2秒触发一次的定时器流，输出自增的序列值
const interval$ = interval(2000).pipe(tap(val => console.log(`定时器触发: ${val}`)));

// 模拟依赖定时器值的HTTP请求，可调整timer参数测试不同耗时场景
function getHttp(value: number) {
  return of(value).pipe(
    tap(() => console.log(`开始HTTP请求，携带值: ${value}`)),
    // 这里替换timer的参数：100对应场景2，10000对应场景1
    switchMap(() => timer(3000)),
    tap(() => console.log('HTTP请求完成')),
    map(() => '请求返回结果')
  );
}

// 真实业务中的另一个数据流
const anotherMockedStream$ = of(1);

interval$.pipe(
  // exhaustMap的核心作用：
  // 当内部的请求流未完成时，忽略定时器后续触发的所有值
  // 只有当前请求完成后，才会响应定时器的下一个新值
  exhaustMap((intervalValue) => {
    // 合并HTTP请求结果与另一个流的数据
    return combineLatest([getHttp(intervalValue), anotherMockedStream$]);
  })
).subscribe(([httpResult, otherData]) => {
  console.log('最终输出:', { httpResult, otherData });
});

逻辑说明 #

• 场景1（请求耗时10秒）：定时器每2秒触发一次，但exhaustMap会忽略请求进行期间的所有定时器事件，直到第一个请求完成（10秒后），才会处理此时最新的定时器值，实际请求间隔为10秒；
• 场景2（请求耗时100ms）：请求很快完成，此时定时器的下一个事件会在约2秒时触发，exhaustMap立即发起新请求，实际间隔保持2秒；
• 完全移除了原方案中冗余的readyForNext$状态Subject，代码更简洁，完全遵循RxJS的响应式编程范式。

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