如何在 API Requests Angular2 中出现 window.alert 错误？答案

【问题标题】：How to window.alert error in API Requests Angular2?如何在 API Requests Angular2 中出现 window.alert 错误？
【发布时间】：2020-07-26 22:28:18
【问题描述】：

我有 2 个 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);
          }

【问题讨论】：

您是否在其他地方订阅 addparkingDetails 和 getparkingDetails，因为在您订阅之前不会发生调用
是的，我有一个我称之为组件的组件

标签： angular api service request

【解决方案1】：

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

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

您可以在这里找到更多信息：https://angular.io/guide/http#reading-the-full-response

【讨论】：