为何我的测试用例中catchError会被调用无数次？

我写了如下业务代码：

makeApiCall() {
  this.client.call().pipe(
    first(),
    catchError((error, caught) => {
      console.log('error!!!');
      this.error = true;
      return caught;
    })
  ).subscribe((response: Response) => { /* 处理逻辑 */ });
}

测试代码：

let response: Subject<Response>;

beforeEach(async () => {
  response = new Subject();
  const client = jasmine.createSpyObj('Client', ['call']);
  (client.call as jasmine.Spy).and.returnValue(response);

  await TestBed.configureTestingModule({
    // 配置内容
    providers: [
      { provide: Client, useValue: client },
      // 其他依赖
    ]
  });

  describe('出现错误时', () => {
    beforeEach(() => {
      component.makeApiCall();
      response.error({ status: 422 });
    });

    it('设置错误标志', () => {
      expect(component.error).toEqual(true);
    });
  });
});

运行测试后，测试通过但控制台无数次打印'error!!!'，请问为何catchError会被执行这么多次？

问题核心出在catchError里的return caught这行代码：

• caught指向的是当前抛出错误的Observable（也就是测试里的response Subject）
• 当Observable抛出错误时，catchError拦截错误后，如果返回caught，RxJS会重新订阅这个Observable
• 而Subject的错误状态是持久化的——一旦调用response.error()，后续所有订阅都会立刻触发这个错误
• 这就形成了无限循环：重新订阅→触发错误→进入catchError→返回caught→再次重新订阅……

根据你的需求，有几种解决方式：

1. 错误处理完成后终止流，返回空Observable：

catchError((error, caught) => {
  console.log('error!!!');
  this.error = true;
  return EMPTY; // 需要导入import { EMPTY } from 'rxjs';
})

2. 把错误继续抛出，交给上层处理：

catchError((error, caught) => {
  console.log('error!!!');
  this.error = true;
  return throwError(() => error); // 需要导入import { throwError } from 'rxjs';
})

3. 如果需要重试请求，不要手动返回caught，改用retry操作符：

this.client.call().pipe(
  retry(2), // 最多重试2次
  first(),
  catchError((error) => {
    console.log('error!!!');
    this.error = true;
    return EMPTY;
  })
)

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