angular - 捕获和处理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回调之后关闭了subscription块。从那里删除多余的括号(，以便将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