如何在RXJS与Angular中将数组值逐个传入timer创建函数

你的核心问题在于retry的delay函数每次重试都会被调用，但你提前创建了一个包含所有延迟的Observable，导致每次重试都会从头订阅这个流，所以始终使用第一个延迟值。

RxJS的retry操作符的delay配置支持传入一个函数，该函数会接收当前的retryCount（重试次数，从0开始计数），你可以利用这个参数直接从延迟数组中取出对应索引的延迟值，返回对应的timer即可。

修正后的代码实现 #

private ob$ = of(1);

private retryConfig: {
  matcher: () => void;
  retryWaits: number[];
};

constructor() {}

private setRetryConfig(): RetryConfig {
  this.retryConfig = {
    matcher: () => {},
    retryWaits: [3000, 4000, 6000],
  };

  return {
    count: this.retryConfig.retryWaits.length,
    // 利用retryCount获取对应索引的延迟值
    delay: (error, retryCount) => {
      const delayMs = this.retryConfig.retryWaits[retryCount];
      console.log(`第${retryCount+1}次重试，延迟${delayMs}ms`);
      return timer(delayMs);
    },
  };
}

ngOnInit(): void {
  this.ob$
    .pipe(
      tap(() => {
        throw new Error('error'); // 简化错误抛出写法
      }),
      retry(this.setRetryConfig())
    )
    .subscribe({
      next: (x) => {
        if (x) {
          throw new Error('error');
        }
      },
      error: (err) => console.log('最终重试失败:', err)
    });
}

关键说明 #

• 移除多余的catchError：如果在retry之前添加catchError，错误会被直接捕获并进入处理逻辑，retry将失去触发条件。
• 直接在delay函数中返回对应延迟的timer：每次重试时retryCount递增（0、1、2），对应取数组中的3000、4000、6000，实现依次递增的延迟重试。
• 简化错误抛出逻辑：throw new Error()可直接使用，无需嵌套throwError(() => ...)，除非你需要返回Observable类型的错误流。

这样修改后，重试时就会按照你期望的顺序依次使用数组中的延迟值了。

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