Angular 14中HttpClient不触发模型构造函数，如何批量处理模型字段？

这是因为Angular的HttpClient默认只是将JSON响应解析为普通JavaScript对象，不会自动实例化你的类，所以构造函数不会执行。下面是几种优雅的解决方式，避免重复编写map操作：

1. 封装通用模型转换服务 + 全局拦截器（最推荐） #

创建专门的转换服务处理模型实例化，配合HttpInterceptor自动拦截所有请求响应，统一完成转换：

步骤1：编写模型转换服务 #

import { Injectable } from '@angular/core';
import { MyObject } from './my-object.model';

@Injectable({ providedIn: 'root' })
export class ModelTransformerService {
  // 转换单个MyObject实例
  toMyObject(json: Partial<MyObject>): MyObject {
    const instance = new MyObject();
    Object.assign(instance, json);
    // 执行你的特定字段处理逻辑
    instance.processSpecialFields();
    return instance;
  }

  // 转换MyObject数组
  toMyObjectList(jsonList: Partial<MyObject>[]): MyObject[] {
    return jsonList.map(json => this.toMyObject(json));
  }

  // 可扩展其他模型的转换方法
}

步骤2：编写全局Http拦截器 #

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { ModelTransformerService } from './model-transformer.service';

@Injectable()
export class ModelTransformInterceptor implements HttpInterceptor {
  constructor(private transformer: ModelTransformerService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      map(event => {
        if (event instanceof HttpResponse) {
          // 通过URL或自定义请求头判断需要转换的模型
          if (request.url.includes('search') && request.method === 'POST') {
            return event.clone({
              body: this.transformer.toMyObjectList(event.body as Partial<MyObject>[])
            });
          }
          // 可添加其他模型的判断逻辑
        }
        return event;
      })
    );
  }
}

步骤3：注册拦截器 #

在AppModule的providers数组中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ModelTransformInterceptor } from './model-transform.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ModelTransformInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

之后所有符合条件的请求都会自动完成模型转换，无需手动编写map。

2. 模型类添加静态工厂方法 + 封装Http请求服务 #

如果不想用拦截器，可以封装通用Http服务，内部调用模型的静态工厂方法：

步骤1：给模型类添加静态方法 #

export class MyObject {
  id: number;
  specialField: string;

  constructor() {}

  // 自定义字段处理逻辑
  processSpecialFields(): void {
    this.specialField = this.specialField?.toUpperCase();
  }

  // 从JSON创建单个实例
  static fromJson(json: Partial<MyObject>): MyObject {
    const instance = new MyObject();
    Object.assign(instance, json);
    instance.processSpecialFields();
    return instance;
  }

  // 从JSON数组创建实例列表
  static fromJsonList(jsonList: Partial<MyObject>[]): MyObject[] {
    return jsonList.map(json => MyObject.fromJson(json));
  }
}

步骤2：封装通用Http服务 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { MyObject } from './my-object.model';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private entitiesUrl = '/api/entities';

  constructor(private http: HttpClient) {}

  // 封装单个模型的POST请求
  postWithModel<T>(url: string, body: unknown, modelFactory: (json: any) => T): Observable<T> {
    return this.http.post(url, body).pipe(map(json => modelFactory(json)));
  }

  // 封装模型数组的POST请求
  postListWithModel<T>(url: string, body: unknown, listFactory: (jsonList: any[]) => T[]): Observable<T[]> {
    return this.http.post(url, body).pipe(map(jsonList => listFactory(jsonList)));
  }

  // 业务请求示例
  search(searchObj: any): Observable<MyObject[]> {
    return this.postListWithModel(
      `${this.entitiesUrl}search`,
      searchObj,
      MyObject.fromJsonList
    );
  }
}

后续所有请求只需调用封装后的方法，传入对应工厂函数即可，避免重复代码。

3. 重载JSON.parse的reviver函数（小众方案） #

如果想从底层处理，可以给模型类定义reviver函数，用于JSON解析时自动实例化：

export class MyObject {
  id: number;
  specialField: string;

  constructor() {}

  processSpecialFields(): void {
    this.specialField = this.specialField?.toUpperCase();
  }

  static reviver(key: string, value: any): any {
    if (value && typeof value === 'object' && 'id' in value && 'specialField' in value) {
      const instance = new MyObject();
      Object.assign(instance, value);
      instance.processSpecialFields();
      return instance;
    }
    return value;
  }
}

使用时自定义响应解析器：

return this.http.post(`${this.entitiesUrl}search`, searchObj, {
  responseType: 'text'
}).pipe(
  map(text => JSON.parse(text, MyObject.reviver) as MyObject[])
);

此方案适合简单场景，但灵活性不如前两种。

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