Question

我当前正在注册页面上，因此，我需要将数据发布到服务器上。客户端验证和服务器验证有效。我知道我可以处理*ngIf="(emailAddress.errors?.required || emailAddress.errors?.email) && emailAddress.touched"之类的客户端错误。但是如何处理服务器端错误？

在我的服务中，如果发生错误，我只需通过return throwError(error);将其提供给组件但是，例如，如果已经有人使用此电子邮件地址，我怎么知道在我的组件中显示特定错误？以及如何区分服务器端的电子邮件/密码验证错误？

Answer 1

取决于您的复杂性和模块。

如果您使用任何类型的状态管理库（例如ngrx或ngxs），建议您执行以下操作：

使用“错误”属性定义状态，该属性跟踪最新的服务器错误。
通过操作和错误执行的Api调用被捕获，并通过操作也存储为状态。（在将错误保存到您的州之前，请执行任何错误映射）
使用组件选择器从State接收错误流。

如果您没有任何状态管理库，则可以在单例服务中创建一个BehaviorSubject，并在遇到任何catchError上下文后立即使用它来发布服务器错误。

Answer 2

通过这种方式，您可以编写自己的 http拦截器，并将响应保存在组件中。同样在您的组件中，您知道您的http响应是成功还是错误。您可以实现其他Http调用（GET，PUT等），也可以处理handleError()函数中的一般错误。

app.module.ts

export class AppModule {
   constructor() {}

   imports: [
          HttpClientModule,
   ],
   providers: [
      {
          provide: Http,
          useFactory: httpFactory,
          deps: [HttpHandler]
      },
   ],
}

export function httpFactory(httpHandler: HttpHandler) {
    return new Http(httpHandler);
}

http.service.ts

export class Http extends HttpClient {
   constructor(handler: HttpHandler) {
      super(handler);
   }

   postCall(url: string, body, options?): Observable<any> {
      return super.post(url, body, options)
          .pipe(
             tap(response => { console.log(response) }),
             catchError(this.handleError(error)));
   }

  private handleError<T>(result?: T) {
     return (error: any): Observable<T> => {
        console.log(error);
        return of(result as T);
     };
  }
}

your.component.ts

export class YourComponent {
   constructor(private http: Http) {}

   this.http.postCall('URL', {}).subscribe(response => {
      if (response instanceof HttpErrorResponse) {
          // Your Response is error
      } else {
         // Your Response is your desired result
      }
}

Angular-组件中的显示服务器错误

2 个答案: