在 Angular 中捕获和处理后端错误

Question

我读过一些其他类似的问题，但那里的信息并没有帮助我找到问题的答案。我在尝试将我设法捕获内部服务的错误传递给组件时遇到了麻烦。所以这是我在组件中的 onSubmit 方法，它注册了一个用户：

    onSubmit({ value, valid }) {
      console.log(value, valid);
      if (valid) {
      this.userService.trySaveUser({ email: value.email, password: value.password.pass }).subscribe(
        (user) => {
          console.log('saved user ' + user.email);
        }),
        (error) => {
          console.log('inside error');
        };
      }
    }

当后端一切正常时，它会正常工作。但是如果出现错误，我无法在这里抓住它。但是，它在服务中被捕获：

trySaveUser(body: User): Observable<any> {
    return this.http.post<any>(this.pathAPI + '/user', JSON.stringify(body), super.header()).pipe(
      catchError(super.handleError));
}

在 super.HandleError 方法中，我从错误中检索数据并可以毫无问题地将其打印到控制台中。这个方法看起来像这样：

    public handleError(error: HttpErrorResponse | any) {
        //...fetching data from the error to errMsg

        //console.error(errMsg);
        return throwError(errMsg);
    }

我想我真的不知道它是如何工作的，因为我希望从上面的方法返回的错误会在这里的组件中再次被捕获：

(error) => {
  console.log('inside error');
};

...但它不会发生。为什么会这样，我该如何纠正？我需要将它放在组件中，以便我可以向用户显示错误消息。如有任何帮助，我将不胜感激！

Answer 1

您实际上是在success 回调之后关闭订阅块。从那里删除多余的括号(，以便将error 回调包含在subscribe 中。

this.userService.trySaveUser({ email: value.email, password: value.password.pass }).subscribe(
        (user) => {
          console.log('saved user ' + user.email);
        }, // remove extra bracket here
        (error) => {
          console.log('inside error');
        };
 )}  // add that bracket in this line