如何实现RxJS间隔请求不中断进行中请求，切换日期时取消旧请求？

你的核心矛盾在于：既要在日期切换时立刻中断旧请求并发起新请求，又要在间隔刷新时避免并发请求。直接用combineLatest+switchMap/concatMap无法同时满足，得通过分层嵌套Observable来实现。

解决方案代码 #

// 若刷新间隔为固定值
data$ = this.dateSelected$.pipe(
  switchMap(selectedDate => {
    // 每次切换日期，生成全新的刷新流：初始立即请求，之后按间隔重复
    return interval(this.refreshIntervalMs).pipe(
      startWith(0), // 触发初始请求，无需等待第一个间隔
      concatMap(() => this.requestDataForDate(selectedDate))
    );
  })
);

// 若刷新间隔为动态可配置的Observable（如用户可修改）
data$ = combineLatest([this.dateSelected$, this.refreshInterval$]).pipe(
  switchMap(([selectedDate, intervalMs]) => {
    return interval(intervalMs).pipe(
      startWith(0),
      concatMap(() => this.requestDataForDate(selectedDate))
    );
  })
);

为什么这样可行？ #

• 日期切换的即时响应：外层用switchMap监听dateSelected$，每次日期变化时，会直接取消之前订阅的所有内部流（包括正在进行的请求、旧的间隔定时器），立刻为新日期创建新的刷新流并发起请求，完全符合“切换日期就取消旧请求”的需求。
• 间隔刷新避免并发：内部流用concatMap处理间隔触发的请求，它会严格等待上一次请求完成后，才会执行下一次请求。就算间隔时间比请求耗时短，也不会并发发起新请求，只会在上一次请求结束后立刻触发下一次。

关键逻辑拆解 #

1. 把日期切换作为顶层触发源，确保日期变化时能完全重置整个刷新流程。
2. 针对每个日期单独创建间隔刷新流，内部用concatMap做串行请求控制。
3. startWith(0)保证每次切换日期后立刻发起第一次请求，不用等待第一个间隔周期。

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