RXJS - 订阅前检查数据答案

【问题标题】：RXJS - Check data before subscribeRXJS - 订阅前检查数据
【发布时间】：2022-01-18 01:54:37
【问题描述】：

我想为一个 Angular 项目实现一个通用的HTTP helper。后端使用此架构重新调整所有 Get 响应：

{
 data: any[]; // response data 
 status:string; // response status , [ ok , problem ]
 message:string; // error message
}

我实现了如下的通用 get 助手

get<T>(endPoint): Observable<T> {
   this.notifier.notify('info', 'Loading ...');
     return this.http.get(endPoint).pipe(
          map((o) => o.data),
                catchError((err) => {
                    this.notifier.notify('error', err);
                    return throwError(err);
                })
   ) as Observable<T>;
}

catchError 会捕获 HTTP 错误，因此notifier 服务会显示错误。

对于自定义错误，我不知道如何在这段代码中捕获它们并显示错误（如果 statusisproblem`，我也不想在订阅后处理这个错误）。

【问题讨论】：

标签： angular error-handling rxjs

【解决方案1】：

您可以使用tap，它用于处理副作用操作，在这种情况下，如果它是problem，则用于处理响应的状态：

  get<T>(endPoint: string): Observable<T> {
    this.notifier.notify('info', 'Loading ...');
      
    return this.http.get(endPoint)
    .pipe(
        tap((response) => {
          if (response.status === 'problem') {
            // do something with it
          }
        }),
        map((o) => o.data),
        catchError((err) => {
          this.notifier.notify('error', err);
          return throwError(err);
        })
    ); // no need of .asObservable<T>, any http calls return an observable
       // if you hover over your get function, you will see that the return
       // type is already Observable<T>
 }
}

【讨论】：

感谢您对选角的评论！

【解决方案2】：

这应该可行：

get<T>(endPoint): Observable <T> {
  this.notifier.notify('info', 'Loading ...');
  return this.http.get(endPoint).pipe(
    map(o => {
      if (o.status !== 'ok') {
        throw 'problem in request status';
      }
      return o.data;
    }),
    catchError((err) => {
      this.notifier.notify('error', err);
      return throwError(err);
    })
  ) as Observable<T>;
}

【讨论】：