如何在 Angular 中使用 catchError RxJS 运算符进行错误处理？

Question

我是 Angular/Typescript 的新手，并且使用 catchError RxJs。我还使用 .subscribe 和管道运算符。我想尽可能多地使用 observable，并将其与 RxJS 运算符结合起来。提交表单后，前端调用 API 并创建一个新产品，并希望使用 HttpErrorResponse 对 400 和 500 的错误代码进行正确的错误处理。 我写了下面的代码，但不确定我是否正确地进行了错误处理，因为我收到了以下错误（见底部）。

app.component.ts

onSubmit(): void {
    if (this.form.valid) {
        console.log('Creating product:', this.form.value);
        this.http.post('/api/create', {
            productName: this.form.value.productName,
        }).pipe(catchError(err => {
            if(err instanceof HttpErrorResponse && err.status == 500 || err.status == 502 || err.status == 503) {
                this.err = "Server Side Error";
                return throwError(err);;
            }
            else if(err instanceof HttpErrorResponse && err.status == 400){
                this.err = "Bad Request";
                return throwError(err);;
            } else if(err instanceof HttpErrorResponse && err.status == 422){
                this.err = "Unprocessable Entity - Invalid Parameters";
                return throwError(err);;
            }
        })
          .subscribe(
            resp => this.onSubmitSuccess(resp), err => this.onSubmitFailure(err)
        );
    }
    this.formSubmitAttempt = true;
}

private onSubmitSuccess(resp) {
    console.log('HTTP response', resp);
    this.productID = resp.projectID;
    this.submitSuccess = true;
    this.submitFailed = false;
}

private onSubmitFailure(err) {
    console.log('HTTP Error', err);
    this.submitFailed = true;
    this.submitSuccess = false;
}

错误：

app.component.ts - 错误 TS2339：类型“AppComponent”上不存在属性“err”。

app.component.ts：124：16 - 错误 TS2339：类型“OperatorFunction”上不存在属性“订阅”。}).subscribe(

Answer 1

为了解决您的问题，我修改了代码，如下所示。

onSubmit(): void {
  if (this.form.valid) {
    console.log('Creating product:', this.form.value);
    this.http.post('/api/create', {
      productName: this.form.value.productName,
    }).pipe(catchError(errorResponse => {

      const err = <HttpErrorResponse>errorResponse;

      if (err && err.status === 422) {
        this.err = "Unprocessable Entity - Invalid Parameters";
        return throwError(err);
      } else if (err && err.status === 400) {
        this.err = "Bad Request";
        return throwError(err);;
      } else if (err && err.status === 404) {
        this.err = "Not found";
        return throwError(err);;
      } else if (
        err &&
        (err.status < 200 || err.status <= 300 || err.status >= 500)
      ) {
        this.err = "Server Side Error";
        return throwError(err);;
      }
    })
    .subscribe(
      resp => this.onSubmitSuccess(resp), err => this.onSubmitFailure(err)
    );
  }
  this.formSubmitAttempt = true;
}

我建议创建一个处理任何异常的通用异常服务。您应该将传出 API 调用分离到单独的服务，然后在组件中使用它。代码将很容易阅读和维护。尝试下面的代码逻辑。

import { HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable()
export class ExceptionService {
  constructor(private toastService: ToastService) {}

  catchBadResponse: (errorResponse: any) => Observable<any> = (
    errorResponse: any
  ) => {
    let res = <HttpErrorResponse>errorResponse;
    let err = res;
    let emsg = err
      ? err.error
        ? err.error
        : JSON.stringify(err)
      : res.statusText || 'unknown error';
    console.log(`Error - Bad Response - ${emsg}`);
    return of(false);
  };
}

在您的服务中，您可以创建这样的 post 方法

saveEntity(entityToSave: EntityToSave) {
  return <Observable<EntityToSave>>(
    this.http.post(`${postURL}`, entityToSave).pipe(
      map((res: any) => <EntityToSave>res),
      catchError(this.exceptionService.catchBadResponse),
      finalize(() => console.log('done'))
    )
  );
}

从您的组件中调用处理异常的服务

this.yourService.saveEntity(entityToSave).subscribe(s => {
  // do your work... this get called when the post call was successful
});

希望它能解决您的问题。