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);
}

打字稿：

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

（EDIT）这样称呼：

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);

然后在订阅中处理它。

Angular 8响应缺少_body和标头

1 个答案: