基于响应指定时长重复RxJS API请求的实现方案问询

我完全懂你的困扰——repeatWhen确实没法直接获取上一次请求的响应结果，所以没法根据返回的expiration动态设置下一次请求的间隔。这里给你推荐用RxJS的expand操作符来解决这个问题，它天生就是为这种基于前一次输出决定后续行为的递归场景设计的。

核心实现代码 #

import { of, timer, Observable } from 'rxjs';
import { expand, map, takeWhile, catchError } from 'rxjs/operators';

// 替换成你实际的API请求函数，返回带expiration的响应
function fetchData(): Observable<{ data: any; expiration: number }> {
  // 示例：模拟后端返回的动态过期时间（1-4秒）
  return of({
    data: `最新数据 ${Date.now()}`,
    expiration: Math.random() * 3000 + 1000,
  });
}

// 构建动态间隔的请求流
const autoRefreshData$ = fetchData().pipe(
  // 递归生成下一次请求：用上一次响应的expiration设置延迟
  expand((lastResponse) => {
    return timer(lastResponse.expiration).pipe(
      map(() => fetchData())
    );
  }),
  // 可选：设置停止条件，这里保持无限重复
  takeWhile(() => true),
  // 错误处理：请求失败后延迟5秒重试
  catchError((err) => {
    console.error('请求失败:', err);
    return timer(5000).pipe(map(() => fetchData()));
  })
);

// 订阅数据流
autoRefreshData$.subscribe({
  next: (res) => {
    console.log(`拿到数据：${res.data}，下次请求将在${res.expiration}ms后发起`);
  },
  error: (err) => console.error('数据流终止:', err),
});

关键部分解释 #

1. expand操作符：
   它会先执行初始的fetchData()，然后对每一个发射的响应，调用我们传入的回调函数。这个回调可以直接拿到上一次的完整响应，所以能轻松读取expiration值来设置下一次请求的延迟。

2. timer(lastResponse.expiration)：
   完全根据后端返回的过期时间来等待，到点后自动发起下一次请求，完美实现动态间隔的需求。

3. 错误处理：
   加入catchError可以避免单次请求失败导致整个数据流中断，这里设置了失败后5秒重试，你可以根据需求调整重试策略。

为什么不用repeatWhen？ #

repeatWhen的回调函数只能拿到一个通知Observable（用来监听何时触发重复），但无法访问上一次请求的响应数据——这就导致它只能设置固定间隔，没法实现动态调整。而expand直接处理每一个响应输出，刚好解决这个痛点。

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