Question

我试图在ionic4应用程序中使用以下代码捕获HTTP错误，错误代码为400。但是它无法捕捉到，这是怎么回事。没有控制台日志行执行，但是在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

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

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

Answer 2

这是可以做到的方式

这里在工作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 3

@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 上查看有关此内容的更多信息。希望这会有所帮助..：）

Answer 4

您要达到的目标是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.')
    );

如何捕获angular（ionic）中的HTTP错误？

4 个答案: