如何抓住http状态
问题描述:
我从英雄之旅中学习Angular,并开发自己的项目。如何抓住http状态
如果操作失败,我有用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响应,我想打印结果作为空值或打印一些消息,如果结果为空,但结果我从窗体中获取值。我不知道如何从反应中获得不好的地位。然后我可以设置适当的陈述或消息。
答
让你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
}
});
}
*“我不知道如何从响应赶上不好的状态”:
然后在
onSubmit()
函数中添加以下代码* - 你认为'.catch(this.handleError);'在做什么? – jonrsharpe