Angular 4无法从DRF响应中提取HTTP状态码与响应JSON

嘿，我之前在做Angular 4 + Django REST Framework项目的时候也遇到过一模一样的问题！默认情况下Angular的HttpClient只会返回响应体，但其实只要稍微调整一下请求配置，就能轻松拿到HTTP状态码，用来做UI端的错误提示。下面是具体的解决办法：

Angular的HttpClient方法（get/post/put等）默认只返回响应体数据，想要拿到状态码，需要在请求选项里设置{ observe: 'response' }，这样就能获取包含status（状态码）、body（响应体）等信息的完整响应对象。

举个例子：

import { HttpClient } from '@angular/common/http';

// 在你的组件或服务中
constructor(private http: HttpClient) {}

fetchData() {
  this.http.get('/api/your-endpoint/', { observe: 'response' })
    .subscribe(
      (successResponse) => {
        // 提取状态码
        const statusCode = successResponse.status;
        // 提取响应体JSON
        const responseData = successResponse.body;
        
        // 正常业务逻辑处理，比如根据状态码做额外判断
        if (statusCode === 201) {
          // 比如提示资源创建成功
        }
      },
      (errorResponse) => {
        // 错误场景下提取状态码
        const errorStatusCode = errorResponse.status;
        // 根据状态码展示对应错误提示
        switch(errorStatusCode) {
          case 400:
            // 展示"参数错误"提示
            break;
          case 404:
            // 展示"资源不存在"提示
            break;
          case 500:
            // 展示"服务器出错"提示
            break;
          // 其他状态码的处理
        }
      }
    );
}

首先要确保你的DRF视图确实返回了带正确状态码的Response对象，比如：

from rest_framework.response import Response
from rest_framework import status

def your_drf_view(request):
    # 业务逻辑处理
    if valid_request:
        return Response(data={"data": "success content"}, status=status.HTTP_200_OK)
    else:
        return Response(data={"error": "invalid parameters"}, status=status.HTTP_400_BAD_REQUEST)

DRF的Response会自动把状态码设置到HTTP响应头里，Angular只要能拿到完整响应就能正确读取到这个值。

如果你的项目里有很多请求都需要根据状态码处理错误提示，推荐封装一个全局HTTP错误拦截器，统一处理所有请求的错误，避免重复代码。

示例代码如下：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
// 假设你有一个自定义的提示服务，用来在UI上展示错误
import { NotificationService } from './notification.service';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private notificationService: NotificationService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<any> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMsg = '未知错误，请稍后重试';
        
        // 根据不同状态码设置对应的错误提示
        switch(error.status) {
          case 400:
            errorMsg = error.error?.error || '请求参数错误';
            break;
          case 401:
            errorMsg = '未授权，请重新登录';
            // 这里可以添加跳转到登录页的逻辑
            break;
          case 403:
            errorMsg = '没有权限执行此操作';
            break;
          case 404:
            errorMsg = '请求的资源不存在';
            break;
          case 500:
            errorMsg = '服务器内部错误，请稍后重试';
            break;
        }

        // 调用提示服务在UI上展示错误
        this.notificationService.showError(errorMsg);
        return throwError(() => new Error(errorMsg));
      })
    );
  }
}

然后在你的AppModule里注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ErrorInterceptor } from './error.interceptor';

@NgModule({
  // ...其他配置
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ]
})
export class AppModule { }

这样所有请求的错误都会被统一拦截处理，根据状态码自动展示对应的UI提示，非常高效！

内容的提问来源于stack exchange，提问作者iPaul