Angular 8 Response Missing _body and Headers

Question

后端代码是.NET中针对4.6.1框架的C＃。前端最近从Angular 4升级到了Angular8。Webpack从2.3版升级到4.41版，打字稿从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);
}

打字稿：

if(response.status === 401){
    if(response.text().includes("Impersonate")){
        this.displayText = ImpersonateRejectText;
    }
    this.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);

然后在订阅中处理它。