如何在API请求Angular2中显示window.alert错误

Question

我有两个API请求，一个Get和一个Post，我想在屏幕上打印这些请求的错误消息。您可以在此处看到GET请求的错误：

401 UNAUTHORIZED
{
"_status": "ERR",
"_error": {
"code": 401,
"message": "Please provide proper credentials"
}
}

您可以在这里看到POST请求的错误：

422 UNPROCESSABLE ENTITY
Append
{
"_status": "ERR",
"_error": {
"code": 422,
"message": "Duplicate licence plate found during insertion."
}
}
Remove
{
"_status": "ERR",
"_error": {
"code": 422,
"message": "Removal aborted. Licence plate not found in any or all of the given indexes."
}
}
401 UNAUTHORIZED
{
"_status": "ERR",
"_error": {
"code": 401,
"message": "Please provide proper credentials"
}
}

我的服务如下，但它不打印这些邮件。

getparkingDetails(): Observable<any>{
console.log(this.token);
const httpOptions = {

headers: new HttpHeaders({
'Content-Type':  'application/json',
'Authorization': 'Bearer: ' + this.token,
}),
};

return this.httpclient.get<any>("https://socialpark.iti.gr:8005/parking_sites/management", httpOptions).pipe(
catchError(this.errorHandler));
}
errorHandler(error: any) {
//if (error == 404)
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
// client-side error
errorMessage = `Error: ${error.error.message}`;
} else {
// server-side error
errorMessage = `Error Code: ${error.status}nMessage: ${error.message}`;
}
window.alert(errorMessage);
return Observable.throw(errorMessage);
}

addparkingDetails(parkingSite: any): Observable<any>{
const httpOptions = {
headers: new HttpHeaders({
'Content-Type':  'application/json',
'Authorization': 'Bearer: ' + this.token,
}),
};
return this.httpclient.post<any>(
"https://socialpark.iti.gr:8005/parking_sites/management/updates",
parkingSite,
httpOptions).pipe(
catchError(this.errorHandlerup));
}
errorHandlerup(error: any) {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
// client-side error
errorMessage = `Error: ${error.error.message}`;
} else {
// server-side error
errorMessage = `Error Code: ${error.status}nMessage: ${error.message}`;
}
window.alert(errorMessage);
return Observable.throw(errorMessage);
}

Answer 1

我认为您需要阅读完整的响应才能做到这一点。为了读取完整响应，请在httpclient.get中使用observe:'response'，如下所示：

getConfigResponse(): Observable<HttpResponse<Config>> {
return this.http.get<Config>(
this.configUrl, { observe: 'response' });
}

您可以在此处找到更多信息：https://angular.io/guide/http#reading-全响应