Angular全局填充API返回缺失字段默认值（无第三方库）

当JSON字符串缺失字段时，会被解析为undefined而非类中定义的默认值。为降低列表加载的传输成本，服务器序列化时会忽略空值、null及默认值，由客户端补全这些字段。

我们定义了如下Customer模型：

export class Customer {
    customerId: number = 0;
    ncode: string = 'some default text';
    name: string = '';
    age: number = 20;
    isActive: boolean = false;
    birthday: Date | null = null;

    // 更多字段...
}

服务端与客户端使用相同模型，服务器返回的示例Customer对象如下：

"{'customerId':1234}"

但通过Angular HttpClient发起GET请求后，生成的Customer对象仅包含customerId字段，其余字段均为undefined。现需一个无需第三方库的全局解决方案，强制Angular为缺失字段填充默认值。

更新1：请求代码 #

export class CustomerComponent implements OnInit {
  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get<Customer>('/api/getCustomer').subscribe((response) => {
      console.log(response); // {'customerId':12345}
    });
  }
}

更新2：全局泛型请求函数 #

public request<T>(api: string, method: string = 'GET', formData: any): Observable<T>{
    return new Observable((observer: Observer<T>) => {
        const header = new HttpHeaders({/*...*/});
        this.http.request<T>(new HttpRequest(method, api, JSON.stringify(formData), {headers: header}))
            .subscribe({next: (response) => {
                observer.next(<T>(<any>response)); // <= 此处需要修改
            }});
    });
}

核心思路 #

Angular HttpClient仅做类型断言，不会自动实例化类并填充默认值。要实现全局补全，需在响应处理环节将返回的普通对象转换为对应类的实例，触发类中定义的默认值。

具体实现 #

1. 为模型类添加静态工厂方法

给每个模型类添加静态方法，用于合并响应对象与类实例的默认值：

export class Customer {
    customerId: number = 0;
    ncode: string = 'some default text';
    name: string = '';
    age: number = 20;
    isActive: boolean = false;
    birthday: Date | null = null;

    // 静态工厂方法：合并响应数据与默认实例
    static fromJson(json: Partial<Customer>): Customer {
        const instance = new Customer();
        Object.assign(instance, json);
        // 处理日期类型转换（可选）
        if (json.birthday) {
            instance.birthday = new Date(json.birthday);
        }
        return instance;
    }
}

2. 改造全局泛型请求函数

修改请求函数，新增反序列化函数参数，在响应返回时完成实例化：

import { Observable, Observer, HttpRequest, HttpHeaders, HttpClient } from '@angular/common/http';

public request<T>(
    api: string, 
    method: string = 'GET', 
    formData: any = null,
    deserializer?: (json: any) => T // 新增反序列化函数参数
): Observable<T>{
    return new Observable((observer: Observer<T>) => {
        const header = new HttpHeaders({/*...*/});
        // 处理GET请求无需body的情况
        const requestOptions = formData 
            ? { body: JSON.stringify(formData), headers: header } 
            : { headers: header };

        this.http.request(method, api, requestOptions)
            .subscribe({
                next: (response) => {
                    let result: T;
                    if (deserializer) {
                        // 使用传入的反序列化函数生成带默认值的实例
                        result = deserializer(response.body);
                    } else {
                        // 无反序列化时直接断言类型
                        result = response.body as T;
                    }
                    observer.next(result);
                },
                error: (err) => observer.error(err),
                complete: () => observer.complete()
            });
    });
}

3. 调用方式

发起请求时传入对应模型的fromJson方法即可：

this.request<Customer>('/api/getCustomer', 'GET', null, Customer.fromJson)
    .subscribe((customer) => {
        console.log(customer); // 此时所有默认字段已被填充
    });

通用化优化（适配多模型场景） #

如果模型类数量较多，可以创建通用工具函数，避免重复编写fromJson：

// 通用反序列化工具函数
export function deserialize<T>(ctor: new () => T, json: Partial<T>): T {
    const instance = new ctor();
    Object.assign(instance, json);
    // 通用日期类型处理（可选）
    Object.keys(instance).forEach(key => {
        if (typeof instance[key] === 'object' && instance[key] instanceof Date && json[key]) {
            instance[key] = new Date(json[key]) as any;
        }
    });
    return instance;
}

调用时只需传入类的构造函数：

this.request<Customer>('/api/getCustomer', 'GET', null, (json) => deserialize(Customer, json))
    .subscribe((customer) => {
        console.log(customer);
    });

该方案无需第三方库，可通过全局请求函数统一处理所有API响应的默认值填充。

内容的提问来源于stack exchange，提问作者Arash Ghasemi Rad