如何捕捉http状态

Question

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

如果操作失败，我有一个后端写在Java returns状态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 函数中进行以下调整：

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

如何捕捉http状态

How to catch http status

javascript

typescript

angular2-forms

angular