Angular 14中如何通过HttpClient将API日期转为Date类型？

TypeScript的类型断言（<MyObject[]>）仅做编译时类型校验，不会在运行时自动转换数据类型，所以需要通过以下方式手动处理日期转换：

方法一：请求响应中手动映射转换 #

适合字段较少或仅需处理特定请求的场景，在订阅结果时直接转换日期字段：

this.http.post<MyObject[]>(`${this.entitiesUrl}search`, searchObj).subscribe(
  (response) => {
    const convertedObjects = response.map(obj => ({
      ...obj,
      myDate: new Date(obj.myDate)
    }));
    // 此时convertedObjects中的myDate为Date类型
  }
);

方法二：通过类构造函数封装转换逻辑 #

将日期转换逻辑封装在MyObject类内部，复用性更强：
首先修改MyObject类：

export class MyObject {
    id!: number;
    myDate!: Date;
    // 其他字段...

    constructor(data: Partial<MyObject>) {
        Object.assign(this, data);
        // 检测并转换日期字符串
        if (data.myDate && typeof data.myDate === 'string') {
            this.myDate = new Date(data.myDate);
        }
    }
}

然后在请求结果中实例化MyObject：

this.http.post<MyObject[]>(`${this.entitiesUrl}search`, searchObj).subscribe(
  (response) => {
    const convertedObjects = response.map(obj => new MyObject(obj));
    // 每个实例的myDate均为Date类型
  }
);

方法三：全局Http拦截器自动转换 #

适合需要批量处理多个接口日期字段的场景，创建拦截器统一识别并转换日期字符串：

1. 创建日期拦截器 #

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class DateInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      map(event => {
        // 仅处理响应完成事件
        if (event.type === 4) {
          this.convertDates(event.body);
        }
        return event;
      })
    );
  }

  private convertDates(obj: any): void {
    if (!obj || typeof obj !== 'object') return;

    Object.keys(obj).forEach(key => {
      const value = obj[key];
      // 匹配YYYY-MM-DD或带时间的ISO格式字符串
      if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}(.\d{3})?)?$/.test(value)) {
        obj[key] = new Date(value);
      } else if (typeof value === 'object') {
        // 递归处理嵌套对象
        this.convertDates(value);
      }
    });
  }
}

2. 注册拦截器 #

在app.module.ts中添加拦截器配置：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { DateInterceptor } from './date.interceptor';

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

之后所有HttpClient的请求响应中，符合格式的日期字符串都会自动转为Date类型。

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