当出现404错误时，如何获取帖子json？ [英] How do I get the post json when there is a 404 error?

问题描述

我有一个服务调用，当它返回404错误时，我想显示当状态为404时来自服务器的消息。所以，如果出现错误或成功，我会得到一个json的帖子我是一个状态代码和消息，指示它是否成功。

I have a service call that when it returns a 404 error, I want to display the message that comes from the server when the status is 404. So, in event of an error or success, I get a post json that gives me a status code and message that indicates if it was successful or not.

当然，我有这个服务电话：

Currrently, I have this service call:

 this._transactionService.findExistingTransaction(user, searchNumber)
       .subscribe(data => {

       this.transactionResponse = data;
       console.log(JSON.stringify(this.transactionResponse));

       this.router.navigate(['/edit-transaction-portal'], {queryParams: {bill: searchNumber}});

       this.onDismiss();
      }, (err) => { this.displayErrors = true;});

出错，它会设置bool displayErrors = true然后我可以在我的错误信息中显示UI。

on error, it will set the bool displayErrors = true and then I can show the error message in my UI.

在html代码中：

 <input #inputtedNumber class="transactionInput" placeholder="{{numberPlaceholder | translate }}"/>
        <div class="error-msg1" *ngIf="displayErrors" style="margin-left:90px;" name="errorMsg">
           {{transactionResponse._errorDetails._message}} </div>

这是我直接尝试访问api端点时回发的json：

This is the json that gets posted back when I directly try to access api endpoint:

{  
   "_transactionNumber":null,
   "_order":null,
   "_errorDetails":{  
      "_status":"404",
      "_message":"Number is not available"
   }
}

我绑定到从服务调用中返回的transactionResponse对象。不幸的是，尽管我认为这应该有效，但我得到的问题是_errorDetails未定义，所以没有任何显示。

I bind to the transactionResponse object that I get back from my service call. Unfortunately, although I believe this should work, I get the issue that _errorDetails is undefined and so nothing shows up.

我想知道这是否适合这样的设置？如果现在，我该如何解决？

I wonder if this is the right setup for something like this? If now, how can I fix it?

谢谢！

编辑：没有回复的SO帖子重复：如何从Angular 4/2中的后端读取自定义错误消息

Duplicate SO post with no answer: How to read Custom error message from backend in Angular 4/2

推荐答案

服务器的响应主体应该在错误中返回的错误响应的错误属性中/ code>回调。

The response body from the server should be in the error property of the error response that comes back in the error callback.

关于 HttpErrorResponse ，文档说明：

• 表示错误或失败的响应，来自非成功HTTP状态，执行请求时出错，或者在解析响应期间发生的其他一些故障。


• Observable 上返回的任何错误$ c>响应流将包含在 HttpErrorResponse 中，以提供额外的c发生错误时关于HTTP层状态的文本。 error属性将包含一个包装的错误对象或从服务器返回的错误响应。



• A response that represents an error or failure, either from a non-successful HTTP status, an error while executing the request, or some other failure which occurred during the parsing of the response.
• Any error returned on the Observable response stream will be wrapped in an HttpErrorResponse to provide additional context about the state of the HTTP layer when the error occurred. The error property will contain either a wrapped Error object or the error response returned from the server.

如果要使用相同的 transactionResponse 来显示错误，请分配错误属性错误返回 this.transactionResponse 。

If you want to use the same transactionResponse to display the errors, then assign the error property of the err that comes back to this.transactionResponse.

服务电话

this._transactionService.findExistingTransaction(user, searchNumber).subscribe(
   (data) => {

     this.transactionResponse = data;
     console.log(JSON.stringify(this.transactionResponse));

     this.router.navigate(['/edit-transaction-portal'], {queryParams: {bill: searchNumber}});

     this.onDismiss();
  },
  (err: HttpErrorResponse) => {
    this.displayErrors = true;

    // assign the error property of the err that comes back to the transactionResponse
    this.transactionResponse = err.error;
  });

HTML
然后这将有效。

HTML Then this will work.

<input #inputtedNumber class="transactionInput" placeholder="{{ numberPlaceholder | translate }}"/>
<div class="error-msg1" *ngIf="displayErrors" style="margin-left:90px;" name="errorMsg">
    {{transactionResponse._errorDetails._message}}
</div>

2017年9月，Angular的这部分工作已完成。解析responseTypejson的错误响应体所以你可能需要根据你的版本更新Angular。

There was some work done to this part of Angular in September 2017. parse error response body for responseType "json" So you may need to update Angular depending on your version.

此解决方案已通过以下测试：

This solution was tested on the following:

• 节点v8.2.1


• NPM v5.3.0


• Angular CLI：1.7.2


• Angular：5.0.0

• Node v8.2.1
• NPM v5.3.0
• Angular CLI: 1.7.2
• Angular: 5.0.0

编辑：StackBlitz示例

HttpErrorResponse StackBlitz示例

此示例对服务的外观以及调用的端点做出一些假设。该服务对 www.google.com 进行 POST 调用。这失败并返回 HttpErrorResponse 。

This example makes some assumptions about what the service looks like and what endpoint it is calling. The service makes a POST call to www.google.com. This fails and returns an HttpErrorResponse.

{
  "isTrusted": true
}

错误 c> HttpErrorResponse 的$ c>属性被分配给 this._transactionResponse 。然后可以在模板中访问它并在浏览器中显示。

The error property of the HttpErrorResponse is assigned to this._transactionResponse. This can then be accessed in the template and displayed in the browser.

这篇关于当出现404错误时，如何获取帖子json？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！