如何用RxJS的catchError控制caught$重试2次且仅打印一次错误

你的问题出在操作符的顺序上：原来的retry(2)放在catchError之后，导致每次重试失败都会触发catchError里的日志，总共执行3次（原始请求+2次重试）。要实现仅在所有重试失败后打印一次错误，需要调整重试逻辑的位置，让重试完成后再处理最终错误。

方案1：前置retry操作符（最简单） #

把retry(2)移到catchError前面，这样原始请求失败后先重试2次，只有当3次尝试全部失败时，才进入catchError执行一次日志和抛出错误。

this.locationChanged$ = this.locationsService
  .getLocationById()
  .pipe(
    retry(2), // 先执行原始请求，失败后重试2次，共3次尝试
    catchError((err) => {
      console.log(err); // 仅在3次尝试全失败时触发一次
      return throwError(err);
    }),
    finalize(() => {
      // 这里的代码无论请求成功/失败都会执行
    })
  );

方案2：用retryWhen实现更灵活的重试（支持延迟等） #

如果需要自定义重试逻辑（比如每次重试前加延迟），可以用retryWhen控制重试次数，当重试耗尽后再进入catchError处理最终错误。

import { retryWhen, take, delay } from 'rxjs/operators';

this.locationChanged$ = this.locationsService
  .getLocationById()
  .pipe(
    retryWhen(errors => 
      errors.pipe(
        take(2), // 限制重试次数为2次
        delay(1000) // 每次重试前延迟1秒，可根据需求删除
      )
    ),
    catchError((err) => {
      console.log(err); // 所有重试失败后仅执行一次
      return throwError(err);
    }),
    finalize(() => {
      // code
    })
  );

为什么原代码会打印3次日志？ #

原代码中retry(2)在catchError之后，意味着每次catchError抛出错误流，retry都会重新订阅整个上游（包括catchError）。所以每次重试失败都会进入catchError执行日志，最终触发3次。

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