RxJS：链式调用中单独捕获各Observable错误（无需嵌套pipe）

原代码问题分析 #

你最初的链式catchError写法会触发两次错误提示，原因是：第一个API调用失败后，第一个catchError处理错误并返回throwError，这个错误会继续向下传递，被第二个catchError捕获，导致两条错误提示同时触发。

非嵌套Pipe的实现方式 #

方式1：封装通用错误处理函数 #

把API请求和对应的错误提示逻辑封装成复用函数，彻底避免嵌套：

// 封装通用的API错误处理工具函数
private handleApiRequest<T>(request$: Observable<T>, errorMsg: string): Observable<T> {
  return request$.pipe(
    catchError(error => {
      this.showError(errorMsg);
      return throwError(() => error);
    })
  );
}

// 调用示例
of(null).pipe(
  switchMap(() => this.handleApiRequest(this.service.getSomething1(), 'Error with Something1')),
  switchMap(() => this.handleApiRequest(this.service.getSomething2(), 'Error with Something2'))
);

方式2：简化内联写法 #

如果不想封装函数，也可以直接在switchMap中内联处理错误，写法上避免多余的嵌套层级，保持代码整洁：

of(null).pipe(
  switchMap(() => 
    this.service.getSomething1().pipe(
      catchError(error => {
        this.showError('Error with Something1');
        return throwError(() => error);
      })
    )
  ),
  switchMap(() => 
    this.service.getSomething2().pipe(
      catchError(error => {
        this.showError('Error with Something2');
        return throwError(() => error);
      })
    )
  )
);

这两种方式的核心逻辑一致：让每个API调用的错误在自身的catchError中处理，处理后抛出的错误会直接终止整个数据流，不会进入后续的操作符，因此只会触发对应API的错误提示。

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