Angular - 在组件中显示服务器错误答案

【问题标题】：Angular - Display server error in componentAngular - 在组件中显示服务器错误
【发布时间】：2018-08-17 08:01:15
【问题描述】：

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

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

【问题讨论】：

服务器需要返回错误的详细信息，然后您的前端需要响应这些详细信息
喜欢给错误一个“区域”标签，然后在模板中的右侧“区域”显示错误？ @OliverRadini
可能，您希望如何显示它取决于您；基本上你需要调用服务器，服务器需要返回一个错误。然后前端可以以任何你喜欢的方式响应它

标签： javascript html angular forms

【解决方案1】：

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

如果你使用任何类型的状态管理库，例如ngrx或ngxs，我建议你这样做：

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

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

【讨论】：

【解决方案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);
     };
  }
}

你的.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
      }
}

【讨论】：