Angular HTTP错误为空,未键入响应 [英] Angular HTTP Error Empty Untyped Response
问题描述
我有一个进行HTTP调用的Angular/JHipster应用程序.我想在我的Observable
订阅中进行错误处理.
I have an Angular/JHipster application that makes HTTP calls. I want to do error handling in my Observable
subscriptions.
但是,第一次调用错误处理程序时,err
对象不是响应,而是原始的{}
Object
.所有后续的错误处理程序调用均具有有效的Response
.
However, when the first time the error handler is invoked, the err
object is not a response, it's a raw {}
Object
. All subsequent error handler invocations have a valid Response
.
为什么会这样,怎么解决?
Why is this happening, and how do I fix it?
handleClickPost() {
this.myService.doPost(this.body)
.subscribe(
(res: Response) => {
this.responseOk = true;
},
(err: Response) => {
// This is a HACK!
// For some reason, the first time this error handler is invoked (after page load),
// the response body is empty here and serializes to "{}".
if (JSON.stringify(err) === '{}') {
// first request always reaches here... WHY?
this.handleClickPost(); // NB: workaround
// err.json(); // results in null "method not found" error
} else {
// second request always reaches here... WHY?
// (I want all requests to go here with a valid 'Response' object)
this.showRequestFailed = true;
this.errorResponse = err.json();
}
}
);
}
MyService.ts:
doPost(body): Observable<Response> {
return this.http.post(this.resourceUrl, body);
}
我的伪劣变通办法是在第一次出现空体故障后再次调用该方法,以获取键入的Response
.
My shoddy workaround is to just call the method again after the first empty-body failure in order to get a typed Response
.
注意:Angular 2和Angular 4都会发生这种情况.
NB: This behavior happens with both Angular 2 and Angular 4.
推荐答案
首先,您必须检查几件事以确保设置正确.
First you have to check few things to make sure your setup is correct.
-
在服务器端检查您是否为第一次请求发送了正确的JSON编码响应,即响应是否已正确序列化.
Check in server side whether you are sending the proper JSON encoded response for the first time request i.e the response is correctly serialized or not.
检查POST请求this.body
的有效负载是否已转换为json字符串,或者是否要将json数据发布到server.你应该用
如果要发送json数据,请在发送请求之前JSON.stringify(this.body)
.
check if the payload for the POST request this.body
is already converted to json string or not if you are posting json data to server . You should use
JSON.stringify(this.body)
before sending the request if you are sending json data.
您应该在post()
方法中使用map()/catch()来实际映射响应并捕获实际错误.
you should use map()/catch() in you post()
method to actually map the response and catch the actual error.
因此您的代码应如下所示
So your code should look like below
MyService.ts:
doPost(body:any): Observable<Response> {
let payload = JSON.stringify(body); // Stringify payload if you are using JSON data
let headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON for json request
let options = new RequestOptions({ headers: headers }); // Create a request option
return this.http.post(this.resourceUrl, payload,options)
.map((res:Response) => res.json()) // ...and calling .json() on the response to return data
.catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any;
}
MyComponent.ts:
handleClickPost() {
this.myService.doPost(this.body)
.subscribe(
(res: any) => {
this.responseOk = true;
},
(err: any) => {
// Log errors if any
console.log(err);
}
}
);
}
或者您可以为catch()
方法创建一个单独的错误处理程序,如下所示
or you can create a separate error handler for the catch()
method like below
private handleError(error: any) {
let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.log(errMsg); // log to console instead
return Observable.throw(errMsg);
}
并在服务类中以这种方式.catch(this.handleError)
使用它.
and use it this way .catch(this.handleError)
in your service class.
这篇关于Angular HTTP错误为空,未键入响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!