Angular：如何以可复用/简洁方式将API数据转换为新数据类型？

针对你遇到的API响应转完全不同ViewModel的问题，这里有几个兼顾复用性和灵活性的解决方案，你可以根据项目规模和需求选择：

方案1：扩展API服务，提供双入口方法 #

核心思路是保留原始API服务的纯净性（保证复用），同时新增专门返回转换后ViewModel的方法，把转换逻辑通过依赖注入的方式整合进来。

修改后的ProductService代码：

export class ProductService { 
  private readonly apiUrl = environment.baseUrl + '/api/CalculateProducts/'; 
  constructor(
    private httpClient: HttpClient,
    private calculateProductModelService: CalculateProductModelService // 注入转换服务
  ) { } 

  // 原始方法：返回API原始响应，供需要原始数据的场景复用
  getProductData( productValuationDtoRequest: ProductValuationDtoRequest ): Observable<ProductValuationResponse> { 
    return this.httpClient.request<ProductValuationResponse>('post', this.apiUrl, {body: productValuationDtoRequest} ); 
  }

  // 新增方法：直接返回转换后的ViewModel，简化组件调用
  getCalculatedProductModel(request: ProductValuationDtoRequest): Observable<CalculateCostModel> {
    return this.getProductData(request).pipe(
      map(response => this.calculateProductModelService.convertData(response))
    );
  }
}

优点：

• 原始API服务完全独立，不会因为转换逻辑影响复用；
• 组件可以根据需求选择调用原始方法或转换后的方法，职责清晰；
• 转换逻辑依然集中在CalculateProductModelService中，便于统一维护。

方案2：封装RxJS操作符，实现灵活转换 #

如果不想修改原有API服务，可以把转换逻辑封装成RxJS操作符，这样在任何订阅API响应的地方，都能按需添加转换逻辑。

修改后的CalculateProductModelService代码：

export class CalculateProductModelService { 
  constructor() { } 

  // 原有转换逻辑不变
  convertData( productValuationResponse: ProductValuationResponse): CalculateCostModel { 
    const calculateProductModel: CalculateCostModel = { 
      valuationAttribute: productValuationResponse?.productValuationDetail[0]?.productValuationAttribute?.description, 
      livingAreaQuantity: productValuationResponse?.productValuationDetail[0]?.quantity, 
      livingAreaRate: productValuationResponse?.productValuationDetail[0]?.improvementUnitValue * 1.03, 
      livingAreaValue: productValuationResponse?.productValuationDetail[0]?.attributeTotalImprovementValue, 
      numberOfUnits: productValuationResponse?.numberOfUnits * 2, 
      replacementCostNew: productValuationResponse?.replacementCostNew, 
      goodPercentage: productValuationResponse?.percentageGood, 
      goodValue: productValuationResponse?.replacementCostNew * (100 - productValuationResponse?.percentageGood) / 100, 
      total: productValuationResponse?.totalImprovementValue 
    }; 
    return calculateProductModel; 
  }

  // 封装成RxJS操作符，方便在流中调用
  toCalculateCostModel(): OperatorFunction<ProductValuationResponse, CalculateCostModel> {
    return map(response => this.convertData(response));
  }
}

组件中的使用方式：

// 场景1：需要原始API数据
this.productService.getProductData(request).subscribe(rawResponse => {
  // 处理原始响应
});

// 场景2：需要转换后的ViewModel
this.productService.getProductData(request).pipe(
  this.calculateProductModelService.toCalculateCostModel()
).subscribe(model => {
  // 处理转换后的ViewModel
});

优点：

• API服务完全保持纯净，不依赖任何转换逻辑；
• 转换逻辑可以灵活应用在任何RxJS流中，适配不同组件的需求；
• 后续新增其他ViewModel转换时，只需要新增对应的操作符即可，扩展性强。

方案3：使用Facade模式统一管理数据流程 #

如果项目中有大量类似的API转ViewModel场景，可以用Facade模式封装所有数据相关逻辑，组件只和Facade交互，不用关心底层的API调用和转换细节。

创建ProductFacade服务：

@Injectable({ providedIn: 'root' })
export class ProductFacade {
  constructor(
    private productService: ProductService,
    private calculateProductModelService: CalculateProductModelService
  ) {}

  // 获取原始API数据
  getRawProductData(request: ProductValuationDtoRequest): Observable<ProductValuationResponse> {
    return this.productService.getProductData(request);
  }

  // 获取转换后的CalculateCostModel
  getCalculateCostModel(request: ProductValuationDtoRequest): Observable<CalculateCostModel> {
    return this.productService.getProductData(request).pipe(
      map(response => this.calculateProductModelService.convertData(response))
    );
  }

  // 后续新增其他ViewModel时，直接扩展方法即可
  // getProductSummaryModel(request: ProductValuationDtoRequest): Observable<ProductSummaryModel> {
  //   return this.productService.getProductData(request).pipe(
  //     map(response => this.productSummaryModelService.convertData(response))
  //   );
  // }
}

组件中的使用方式：

this.productFacade.getCalculateCostModel(request).subscribe(model => {
  this.costModel = model;
});

优点：

• 组件层代码极度简洁，只需要和Facade交互；
• 所有数据逻辑集中在Facade中，便于统一维护和修改；
• 扩展性强，新增ViewModel或调整API逻辑时，只需要修改Facade，不用改动所有组件。

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