如何捕捉角度（离子）中的http错误？

Question

我正在尝试使用 ionic4 应用程序中的以下代码来捕获错误代码为 400 的 HTTP 错误。但它无法捕捉到它，这里有什么问题。控制台日志行均未执行，但在 Firefox 控制台中显示 400 错误。

export class AuthService {

  constructor(private httpClient: HttpClient)  {}

  login(email: string, password: string){

    const data = {
      password: password,
      email: email,
    }

    this.httpClient.post(url, data).pipe(
      tap((res: IAuthResponse) => {
        console.log("Catch error 1") 
        return res;
      }),
      catchError((error) => {
        console.log("Catch error 2")
        return Observable.throw(new Error(error.status));
      })
    ).subscribe( 
       (result) => {
         console.log("Catch error 3")
       },
       (error) => {
          console.log("Catch error 4")
       }
    );
  }

实际上，我只想在我编写 console.log 行的任何地方处理此错误。找到了很多这样的例子，但没有一个有效。

编辑：在我的真实代码中，控制台日志第 1 行位于 AuthService 类中，但订阅代码位于不同的类文件中。这两个类都必须根据结果进行一些初始化。所以我需要同时拥有管道代码和订阅代码。

Answer 1

这是可以做到的方式

这里正在工作Example

this.httpClient.post("ssdsdsd", data).pipe(
      (res: any) => {
        console.log("Catch res ") 
        return res;
      },
    ).subscribe( 
       (result) => {
         console.log("Catch result ")
       },
       (error) => {
          console.log("Catch error ")
       }
    );

Answer 2

无需在httpClient 中使用pipe 你可以这样尝试：

this.httpClient.post(url, data).subscribe((res: any) => {
}, (error) => {
  console.log("Catch error ")
})

Answer 3

你想要达到的是The Catch and Rethrow Strategy，正如here 的详细解释。它的实现非常简单，无论您的 pipe-catchError 和 subscription 是否存在于同一类或不同类中，我想不出您的代码行为怪异的原因。我会说在您的代码中放置调试点并在 chrome/firefox 开发人员模式下进行调试。

const http$ = this.http.get<Course[]>('/api/courses');

http$
    .pipe(
        catchError(err => {
            console.log('Handling error locally and rethrowing it...', err);
            return throwError(err);
        })
    )
    .subscribe(
        res => console.log('HTTP response', res),
        err => console.log('HTTP Error', err),
        () => console.log('HTTP request completed.')
    );

Answer 4

@Sameera.. 你可以捕捉到错误（带有状态码），如下所示，

this.httpClient.post(url, data, {observe: 'response'}).subscribe((res: IAuthResponse) => {
        console.log(res);
        return res;
   }, fail => {
          console.log(fail.status);
       }
   );

你不需要为此使用任何管道或其他运算符。

您可以在此处查看更多信息httpClient response with Status code。希望这会有所帮助.. :)