无法从 Angular 服务获取 HTTP 响应代码

Question

我在项目中使用 Angular 4 作为前端，使用 Django REST Framework (DRF) 作为后端。从 DRF 端，我以响应元组 Response(data=vJSON, status=vStatus) 的形式返回 Response JSON & HTTP Response Code ,从GET/PUT/POST等视图函数

问题是，从 Angular 结束，我无法单独提取 HTTP 响应代码和响应 JSON 。这是我需要的，因为如果 HTTP 代码不是 200 或 201，HTTP 响应代码可以帮助我在 UI 结尾显示错误消息，这是我无法做到的。

我只从服务函数返回给组件函数的响应中得到 JSON 部分。那么如何分别获取 HTTP Code 和 Response JSON？

代码如下：-

views.py

from rest_framework.response import Response
from rest_framework import status
..
..
def get(self, request, format = None):       
   vJSON = {}
   try:
      vHTTPStatus = status.HTTP_200_OK
      # All logics are here
      ..
      ..
   except Exception as e:
      vHTTPStatus = status.HTTP_400_BAD_REQUEST
   finally:          
      return Response(data=vJSON, status=vHTTPStatus)

app.service.ts

import {Observables} from 'rzjs/Observable';
import {HttpClient, HttpParams} from '@angular/common/http';

export class AppService{
  private _URL: string;

  constructor(private _httpConn: HttpClient){
    this._URL = 'http://xx.xx.xx.xxx/8000/myapi/';
  }

  getResponse(pParams){
    return this._httpConn.get(_URL, {params: pParams});
  }
}

app.component.ts [在代码下面的评论部分我已经提到了我的要求]

import {AppService} from ./app.service;
import {HttpParams} from '@angular/common/http';

export class AppComponent {

  textAreaValue: string;

  constructor(private _myService: AppService){
    this.textAreaValue = "";
  }

  fetchData(): void{
    let vSearchParam = new HttpParams();
    vSearchParam = vSearchParam.append('id', '1000001');

    this._myService.getResponse(vSearchParam).subscribe(
      response => {
        ..
        /* Here are the logics how to use the response JSON */
        console.log(response);
        ..
        ..
        /* This is what I want 
           if (response.status != 200) {
              this.displayError("There is a connection issue!");
              this.textAreaValue = "Unable to show records!";
           }
           else{
              this.textAreaValue = response.data['value'];
           }
        */            
      }
    );
  }
}

Answer 1

您应该设置观察值：

所以在你的服务方法中：

getResponse(pParams){
  return this._httpConn.get(_URL, {params: pParams, observe: 'response'});
}

在你的组件中：

this._myService.getResponse(vSearchParam).subscribe(
  (response: HttpResponse<any>) => {
    console.log(response.status);   
  }
);

响应将是一个 HttpResponse 对象。您可以找到完整的指南 reading-the-full-response

无法从 Angular 服务获取 HTTP 响应代码

Unable to get the HTTP Response Code from Angular Service

django-rest-framework

typescript

angular-services

angular

angular4-httpclient