如何抓住http状态

Question

我从英雄之旅中学习Angular，并开发自己的项目。

如果操作失败，我有用Java编写的后端返回状态500。 如果操作失败看起来像下面的回应：

{"timestamp":1497911402842,"status":500,"error":"Internal Server Error","exception":"javax.validation.ConstraintViolationException","message":"Content of message"} 

我的服务：

getProducts(): Promise<Product[]> { 
     return this.http.get(this.productsUrl) 
      .toPromise() 
      .then(response => response.json() as Product[]) 
      .catch(this.handleError); 
    } 
private handleError(error: any): Promise<any> { 
     console.error('An error occured ', error); 
     return Promise.reject(error.message); 
} 

我的表单组件：

export class ProductFormComponent { 

    constructor(private productService: ProductService) {} 

    model: Product = new Product(
     1, 
     'Name of product' 
    ); 

    result: Product= new Product(
     null, 
     null 
    ); 

    submitted = false; 

    onSubmit(): void { 
     this.submitted = true; 
     this.productService.create(this.model) 
      .then(response => this.result = response); 
    } 

    clearForm(): void { 
     this.model = new Product(
      null, 
      '' 
     ); 
    } 

} 

，并形成看起来象下面这样：

<div class="container"> 
    <div [hidden]="submitted" class="container"> 
     <h1>Product form</h1> 
     <form (ngSubmit)="onSubmit()" #productForm="ngForm"> 
      <div class="form-group"> 
       <label for="productId">Product id:</label> 
       <input type="text" class="form-control" id="productId" required [(ngModel)]="model.productId" name="productId" #productId="ngModel"> 
      </div> 
      <div class="form-group"> 
       <label for="productName">Product name:</label> 
       <input type="text" class="form-control" id="productName" required [(ngModel)]="model.productName" name="productName" #productName="ngModel"> 
       <div [hidden]="productName.valid" class="alert alert-danger"> 
        Product name is required 
       </div> 
      </div> 

      <button type="button" class="btn btn-default" (click)="clearForm(); productForm.reset()">Clear form</button> 
      <button type="submit" class="btn btn-success" [disabled]="!productForm.form.valid">Submit</button> 
     </form> 
    </div> 

    <div [hidden]="!submitted"> 
     <h2>Submitted product:</h2> 
     <div class="row"> 
      <div class="col-xs-3">Product name:</div> 
      <div class="col-xs-9 pull left">{{ result.productName }}</div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-3">Product id:</div> 
      <div class="col-xs-9 pull left">{{ result.productId }}</div> 
     </div> 

     <br/> 
     <button class="btn btn-primary" (click)="submitted=false">Edit</button> 
    </div> 
</div> 

问题是，当我提交不正确的值，我得到状态500响应，我想打印结果作为空值或打印一些消息，如果结果为空，但结果我从窗体中获取值。我不知道如何从反应中获得不好的地位。然后我可以设置适当的陈述或消息。

Answer 1

让你handleError功能如下调整：

onSubmit(): void { 
    this.submitted = true; 
    this.productService.create(this.model) 
     .then(response => { this.result = response }, 
       error => { 
       if(error.status == 500){ 
        alert(JSON.stringify(error)); 
        this.result = null; 
        //you can add more steps here 
       } 
       }); 
    }