如何用Angular HttpClient从Rest请求获取含字段和方法的真实类实例？

你设想的通过HttpInterceptor实现自动类型转换的方案完全可行，相较于2017年普遍使用的单请求手动映射方案，目前的实现方式要简洁得多，几乎不会对业务代码造成侵入。

核心原理 #

Angular HttpClient 默认仅会将接口返回的JSON字符串解析为普通无原型的JS对象，并不具备你定义的House类的方法，而HttpInterceptor可以在响应回到业务调用方之前，全局统一完成普通对象到类实例的转换，刚好匹配你的需求。

最简实现步骤 #

1. 依赖准备 #

推荐使用class-transformer库完成对象转换，无需你手动编写属性赋值逻辑，也支持嵌套类、属性过滤等复杂场景：

npm install class-transformer reflect-metadata

2. 定义转换拦截器 #

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable, map } from 'rxjs';
import { plainToInstance } from 'class-transformer';
// 你自己定义的实体类，可根据自己的需求做路径匹配映射，不用硬编码
import { House } from './models/house.model';

@Injectable()
export class ModelTransformInterceptor implements HttpInterceptor {
  // 路径和目标类的映射规则，可自行扩展
  private pathModelMap: Record<string, new () => any> = {
    'MyRestPath': House
  };

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      map(event => {
        if (event instanceof HttpResponse) {
          const targetClass = this.pathModelMap[req.url];
          if (targetClass) {
            // 普通对象转类实例
            const transformedBody = plainToInstance(targetClass, event.body);
            return event.clone({ body: transformedBody });
          }
        }
        return event;
      })
    );
  }
}

3. 注册拦截器 #

在你应用的根模块或者核心模块的providers数组中添加：

{
  provide: HTTP_INTERCEPTORS,
  useClass: ModelTransformInterceptor,
  multi: true
}

完成以上配置后，你写的示例业务代码完全不需要任何修改，接口返回的对象就会自带House类的所有属性和方法，可以正常调用house.doSomething()。

扩展优化 #

如果不想维护固定的路径映射，也可以借助Angular的HttpContext在发送请求时动态指定要转换的目标类，灵活度更高，同样不会增加太多业务代码。

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