出现 404 错误时如何获取 post json？

Question

我有一个服务调用，当它返回 404 错误时，我想在状态为 404 时显示来自服务器的消息。因此，如果发生错误或成功，我会得到一个 post json我一个状态代码和消息，指示它是否成功。

目前，我有这个服务电话：

 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 中显示错误消息。

在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：

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

我绑定到从服务调用返回的 transactionResponse 对象。不幸的是，尽管我相信这应该可行，但我得到了 _errorDetails 未定义的问题，因此什么也没有出现。

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

谢谢！

编辑：重复的 SO 帖子没有答案：How to read Custom error message from backend in Angular 4/2

Answer 1

来自服务器的响应正文应位于error 回调中返回的错误响应的error 属性中。

关于HttpErrorResponse，文档指出：

• 表示错误或失败的响应，可能来自不成功的 HTTP 状态、执行请求时出错或在解析响应期间发生的其他故障。
• Observable 响应流上返回的任何错误都将包装在HttpErrorResponse 中，以提供有关发生错误时 HTTP 层状态的附加上下文。 error 属性将包含包装好的 Error 对象或从服务器返回的错误响应。

如果您想使用相同的transactionResponse 来显示错误，则将返回到this.transactionResponse 的err 的error 属性分配给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 那么这将起作用。

<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 的这一部分进行了一些工作。parse error response body for responseType "json" 所以你可能需要根据你的版本更新 Angular。

此解决方案已在以下方面进行了测试：

• 节点 v8.2.1
• NPM v5.3.0
• Angular CLI：1.7.2
• 角度：5.0.0

编辑：StackBlitz 示例

HttpErrorResponse StackBlitz example

这个例子对服务的外观和它调用的端点做了一些假设。该服务向www.google.com 发出POST 调用。这会失败并返回一个HttpErrorResponse。

{
  "isTrusted": true
}

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

Answer 2

您的问题是，如果发生错误，您的

data => {
       this.transactionResponse = data;

代码没有被调用 - 你得到一个 错误 响应，毕竟不是正常的响应。

尝试从

中获取信息

 }, (err) => { this.transactionResponse = err

部分。

Answer 3

我认为你可以使用typed response:

在您的 error 通知类型上，您可能会有如下内容：

err =>  {
        this.localErrorResponse = err as ErrorResponse;
        this._order= this.localErrorResponse._order;
      }

在你的课堂上，你也可以：

import { ErrorResponse } from './error-response';

localErrorResponse: ErrorResponse;
_order: string;

然后，您可以拥有 ErrorResponse 类，例如：

import { ErrorDetail } from './error-detail';

export class ErrorResponse{
  _transactionNumber: number;
  _order: string;
  _errorDetails: ErrorDetail;
}

和班级ErrorDetail

export class ErrorDetail {
  _status: number;
  _message: string
}

然后您可以映射一些其他变量，如 _order (this._order)，或从您的 localErrorResponse (this.localErrorResponse) 变量中获取它们

Answer 4

我有一个服务调用，当它返回 404 错误时，我想 当状态为 404 时显示来自服务器的消息

...

我绑定到我从我的 服务电话。不幸的是，虽然我相信这应该可行，但我 得到 _errorDetails 未定义的问题，因此没有任何显示。

试试这个：

StackBlitz EXAMPLE