组件上的Angular Observer catch错误

Question

我的组件上有此代码

  this.authService.login4(this.email, this.password)
         .pipe(first())
         .subscribe(
             data => {
                  console.log(data);

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

             });

以及我对服务的此实现：

login4(email: string, password: string): Observable<any> {
  return  this.http.post('http://localhost:3000/api' + '/login', {
    email: email,
    password: password
  });
}

如果出现错误，则会打印err，但是如果我为此更改登录的实现，则不会打印err组件。这正常吗？我想知道组件中是否有错误。

  login4(email: string, password: string): Observable<any> {

return  this.http.post('http://localhost:3000/api' + '/login', {
    email: email,
    password: password
  }).pipe(
  tap(data => console.log(data)),
  catchError(this.handleError<any>(`err`))
);
}

Answer 1

如果发现错误，则将其停止。您可以捕捉并抛出，​​也可以不捕捉直到它到达组件。请参见下面的两个示例：

抓住并抛出。用于处理预期错误。

ngOnInit() {
    this.login().subscribe(
        res => {
            console.log(res);
        },
        err => {
            console.log(err);
        }
    );
}

login() {
    return ajax.post("http://localhost:3000/api/login").pipe(
        map(data => data),
        catchError(err => {
            throw new Error("My Error");
        })
    );
}

只有在组件中才能抓到。

ngOnInit() {
    this.login().subscribe(
        res => {
            console.log(res);
        },
        err => {
            console.log(err);
        }
    );
}

login() {
    return ajax.post("http://localhost:3000/api/login").pipe(
        map(data => data)
    );
}

两者都可以。

Answer 2

抑制Service Class中的错误不是一个好主意。如果这样做，您将永远无法告诉组件出了问题，以及组件不知道是否发生了故障。如果Component不知道，它将不会向最终用户抛出错误。

  

最终用户将对操作是否完成感到困惑。

这是一个示例，但是有多种原因可导致在组件级别抛出错误。

Answer 3

您应该在catchError中使用throwError

import { throwError } from 'rxjs';

login4(email: string, password: string): Observable<any> {

return  this.http.post('http://localhost:3000/api' + '/login', {
    email: email,
    password: password
  }).pipe(
  tap(data => console.log(data)),
  catchError((err) => throwError(err))
);