Angular 16中使用DTO处理HTTP响应的完整示例求助

先梳理原代码中的核心问题：

• 自定义响应接口字段类型不匹配（success应为boolean而非string，status应为number而非string）
• Service中错误调用subscribe，导致无法返回Observable供组件订阅
• 错误使用res.Data.json()，HttpClient已自动解析JSON响应
• 字段名大小写错误（后端返回小写的data/success/message，原代码误用大写）
• 未处理HTTP错误状态码的分支逻辑

以下是完整修正后的实现：

修正后的模型文件 #

Models/http_response.ts #

将接口改为泛型，适配不同接口的返回数据类型，同时避免与Angular内置HttpResponse冲突：

export interface ApiResponse<T> {
  data: T;
  success: boolean;
  message: string;
}

Models/user.ts #

保留原定义，无需修改：

export interface User {
  name: string;
  age: number;
}

修正后的API服务 #

Services/api.service.ts #

实现状态码检查、错误捕获、类型安全的响应映射：

import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { ApiResponse } from '../models/http_response';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'your_api_url'; // 替换为实际API地址

  constructor(private http: HttpClient) { }

  getData(): Observable<ApiResponse<User>> {
    return this.http.get<ApiResponse<User>>(`${this.apiUrl}/Data`, { observe: 'response' }).pipe(
      map((response: HttpResponse<ApiResponse<User>>) => {
        // 校验HTTP状态码
        if (response.status === 200) {
          console.log('API请求成功 - 200 OK');
          return response.body as ApiResponse<User>;
        } else {
          throw new Error(`HTTP状态码异常: ${response.status}`);
        }
      }),
      catchError((error: HttpErrorResponse) => {
        // 统一处理HTTP错误（404/500等）
        const errorMsg = error.error instanceof ErrorEvent
          ? `客户端错误: ${error.error.message}`
          : `服务器错误: ${error.status} - ${error.message}`;
        
        console.error('API请求失败:', errorMsg);
        return throwError(() => new Error(errorMsg));
      })
    );
  }
}

修正后的组件 #

pages/page1/page1.component.ts #

规范命名，完善响应与错误的分支处理：

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';
import { ApiResponse } from '../models/http_response';
import { User } from '../models/user';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.scss']
})
export class Page1Component implements OnInit {
  dataSource: User | null = null; // 后端返回单个User对象，而非数组
  errorMessage: string = '';

  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    this.onGetData();
  }

  onGetData(): void {
    this.apiService.getData().subscribe({
      next: (response: ApiResponse<User>) => {
        console.log('HTTP响应详情:', response);
        if (response.success) {
          this.dataSource = response.data;
          this.errorMessage = '';
        } else {
          this.errorMessage = response.message;
        }
      },
      error: (err) => {
        this.errorMessage = err.message;
        this.dataSource = null;
        console.error('组件处理错误:', err);
      }
    });
  }
}

组件模板示例（page1.component.html） #

添加错误展示逻辑，优化用户体验：

<div *ngIf="dataSource; else errorBlock">
  <h3>用户信息</h3>
  <p>姓名：{{ dataSource.name }}</p>
  <p>年龄：{{ dataSource.age }}</p>
</div>

<ng-template #errorBlock>
  <p class="text-danger">{{ errorMessage || '加载数据失败' }}</p>
</ng-template>

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