httpステータスを取得するには

Question

私はヒーローのツアーから角度を学び、私自身のプロジェクトを開発します。

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を返信し、結果がnullの場合は結果を出力するか、結果がnullの場合はメッセージを出力したいと思います。そして、私はどのようにレスポンスから悪い地位を捕まえるのか分かりません。そうすれば、適切な声明やメッセージを設定することができました。

Answer 1

あなたhandleError機能で、以下の調整を行います。

return Promise.reject(error); 

次にonSubmit()機能に次のコードを追加します。

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 
       } 
       }); 
    }