Angular/RxJS中请求失败后如何重新提交动作流Observable？

解决方案 #

问题核心是Observable一旦发生错误就会自动终止：你的service.ts中，handleError返回了throwError(errorMessage)，这个错误会向上冒泡到外层的sendRequest$流，直接导致整个流终止。之后哪怕exampleRatingSubjectAction$再发射新的请求对象，已经终止的sendRequest$也不会再响应。

给你两种直接可行的解决方式：

方式一：修改服务端错误处理，让流保持存活 #

把handleError里的return throwError(errorMessage)改成返回EMPTY，这样switchMap内部的错误只会终止当前的HTTP请求流，不会影响外层的主数据流：

private handleError(err: HttpErrorResponse): Observable<any> {
  let errorMessage: string;
  if (err.error instanceof ErrorEvent) {
    errorMessage = `发生错误: ${err.error.message}`;
  } else {
    errorMessage = `后端返回状态码 ${err.status}: ${err.message}`;
  }
  console.error(err);
  // 返回EMPTY，让外层流继续监听后续的请求动作
  return EMPTY;
}

如果需要把错误信息传递到组件处理，也可以返回of({ isError: true, message: errorMessage })，然后在组件的pipe里判断是否为错误结果。

方式二：调整错误处理的层级，让组件消化错误 #

如果需要在组件里处理错误提示，可以把服务端的catchError移除，让错误冒泡到组件层处理，同时确保组件的错误处理不会终止主数据流：

1. 修改service.ts，移除HTTP请求pipe里的catchError(this.handleError)，或者让handleError返回错误对象而非throwError：

// 调整handleError返回错误对象，而非抛出错误
private handleError(err: HttpErrorResponse): Observable<any> {
  let errorMessage: string;
  if (err.error instanceof ErrorEvent) {
    errorMessage = `发生错误: ${err.error.message}`;
  } else {
    errorMessage = `后端返回状态码 ${err.status}: ${err.message}`;
  }
  console.error(err);
  return of({ isError: true, message: errorMessage });
}

2. 组件里通过判断结果是否为错误来处理逻辑，避免用catchError终止流：

exampleResponsePriority$ = this.dataService.sendExampleRequest$
  .pipe(
    tap(result => {
      this.showPageLoader = false;
      if (result.isError) {
        this.errorMessageSubject.next(result.message);
        console.log("priority");
      } else {
        this.exampleResponsePriority = result;
        this.calculatorService.checkMinOrDeficitRate(result);
      }
    })
);

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