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

然后在訂閱中處理它。