Angular Observer 在组件上捕获错误

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，但是如果我将 login 的实现更改为此，则不会打印组件 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

抑制服务类中的错误不是一个好主意。 如果您这样做，您将永远无法告诉组件出现了问题，并且组件不知道是否发生了故障。 如果 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))
);