如何在RxJS中像映射Observable成功结果一样映射错误？

问题解答 #

RxJS 中并没有名为 mapError 的操作符，但你可以使用 catchError 操作符实现错误映射需求，同时保持错误流的传递，让订阅者处理最终的错误（比如页面重定向）。

1. 在 DbFacadeService 中实现错误映射

直接在 read 方法里用 catchError 捕获并转换错误，优先使用后端返回的自定义错误码， fallback 到 HTTP 状态码：

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

public read(dataType: DataType, id: string): Observable<DataEntry | undefined> {
  return this._http.get<DataEntry>(`${this.baseURL}/${dataType}/${id}`, { observe: 'response' })
    .pipe(
      map((response: HttpResponse<DataEntry>) => response.body || undefined),
      catchError((error: HttpErrorResponse) => {
        const errorCode = error.error?.code || `${error.status}`;
        // 抛出转换后的错误码，让订阅组件处理
        return throwError(() => errorCode);
      }),
      first()
    );
}

2. 组件侧简化错误处理

组件订阅时无需再处理错误转换，直接使用转换后的错误码进行重定向：

this._dbFacadeService.read(this._dataType, entryId)
  .subscribe({
    next: (entry: DataEntry) => { /* 处理正常数据逻辑 */ },
    error: (code: string) => this._router.navigate(['/error', code])
  });

3. 通用错误映射优化

如果多个 API 方法都需要相同的错误映射逻辑，可以抽成通用 RxJS 操作符复用：

import { MonoTypeOperatorFunction } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

export function mapApiError(): MonoTypeOperatorFunction<any> {
  return catchError((error: HttpErrorResponse) => {
    const errorCode = error.error?.code || `${error.status}`;
    return throwError(() => errorCode);
  });
}

之后在 API 方法中直接调用：

.pipe(
  map((response: HttpResponse<DataEntry>) => response.body || undefined),
  mapApiError(),
  first()
);

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