Angular 8 响应缺少 _body 和标题

Question

后端代码是面向 4.6.1 框架的 .NET 中的 C#。 前端最近从 Angular 4 升级到了 Angular 8。与此同时，webpack 从 2.3 版升级到了 4.41 版，typescript 从 2.2 升级到了 3.2.4。

代码本身没有改变。

C＃：

public override Task OnAuthorizationAsync(HttpActionContext actionContext, CancellationToken cancellationToken)
{
    var reject = false;
    var principal = actionContext.RequestContext.Principal as ClaimsPrincipal;

    if (principal == null || !principal.Identity.IsAuthenticated || reject) {
        actionContext.Response = actionContext.Request.CreateResponse(HttpStatusCode.Unauthorized,
            new { error = "Unauthorized request for Impersonate Mode" },
            actionContext.ControllerContext.Configuration.Formatters.JsonFormatter);
        return Task.FromResult<object>(null);
    }

    return Task.FromResult<object>(null);
}

打字稿：

actionErrorResponseHandler(response: Response) {
    if(response.status === 401){
        if(response.text().includes("Impersonate")){
            this.displayText = ImpersonateRejectText;
        }
        this.show();
    }
}

（编辑）这样调用：

setupPopUpModal(modalHeader: string, displayText: string){
    this.accountService.accountShowPopUpModal()
    .pipe(catchError((response: Response) => this.rejectModal.actionErrorResponseHandler(response)))
    .subscribe((result: string) => {
        if(result == "Done"){
            this.modalHeader = modalHeader;
            this.displayText = displayText;
            this.messageBoxModal.show();
        }            
    })
}

以前这工作正常。 现在它会生成一个错误，指出“e.text 不是函数”

如果我查看 Chrome 的开发工具，我会在升级前看到这一点：

这之后：

.text() 函数试图将正文作为字符串返回，但正文不再存在。 我试图搜索的消息现在在 e.error 中，但在 Angular/Typescript 中“response.error”不是有效代码。

我假设我需要以不同的方式构建和/或解析响应，但我找不到任何关于此的文档。 任何帮助将非常感激。

Answer 1

我会假设旧的 Angular 版本在 4.3 之前？

在 4.3 中，常规 HTTP 请求从“Http”更改为“HttpClient”。 主要的变化是你没有得到响应结果，而是只有 (json) 响应正文。 如果请求不成功（并且 401 不是一个 :-) ），那么它就会出错。

因此，您必须捕获错误并处理它。 这可以通过多种方式完成。 我假设您使用 RxJs 来处理响应。 那么你的代码可能看起来像这样

let response: SomeTyp;
this.httpClient.get<SomeTyp>('myBackendUrl').subscribe( (result) => response = result);

因此，如果您的后端调用返回 400，则不会执行“常规”订阅。 因此response保持为空。

一种解决方案可能是处理订阅中的错误情况

let response: SomeTyp;
this.httpClient.get<SomeTyp>('myBackendUrl').subscribe( 
  (result) => response = result,
  (errorCase) => this.handleTheError(errorCase)
);

private handleTheError(errorCase:ttpErrorResponse):void {
  if(response.status === 401){
    if(response.text().includes("Impersonate")){
      this.displayText = ImpersonateRejectText;
      return
    }
  }
  throw Error('Unexpected Backend Response');
}

第二种解决方案是在流中处理它

let response: SomeTyp;
this.httpClient.get<SomeTyp>('myBackendUrl').pipe(
  catchError( (errorCase:ttpErrorResponse) => // Handle the error )
).subscribe( 
  (result) => response = result
);

“catchError”的优点是，您可以捕获错误，如果它是您可以优雅处理的“预期”错误，只需返回一个有效值。 然后这个值将由订阅处理，就像您获得有效的后端响应一样。
如果错误无法正常处理，您仍然可以再次抛出它

return throwError(errorCase);

然后在订阅中处理它。