在从 HttpClient 请求获得的对象转换新类型之前，如何使用 rxjs 映射来改变对象中的数据？

Posted 2023-03-31

【中文标题】在从 HttpClient 请求获得的对象转换新类型之前，如何使用 rxjs 映射来改变对象中的数据？

【英文标题】：How do I use rxjs map to mutate data in object before casting a new type from an object gotten from a HttpClient request?

【发布时间】：2019-12-05 18:03:57

【问题描述】：

希望标题不要太具体。

我正在使用的后端将日期作为字符串返回。我有一个函数可以将该字符串转换为 javascript Date 对象。我使用 Rxjs 映射将 json 响应转换为我的 Typescript 对象，如下所示。

  getAllRecordsByEmployeeId(employeeId: number): Observable<Record[]> 
    return this.http.get<Record[]>(
        this.basePath
        + this.recordPath
        + this.recordEmployeeIdParam
        + employeeId,
        this.httpOptions)
        .pipe(
            map((res: any) => res.records as Record[]),
        );
  

我想在 res.records.startDate 变成一个 Record 对象之前用一个函数来改变它。我怎样才能做到这一点？

【参考方案1】：

getAllRecordsByEmployeeId(employeeId: number): Observable<Record[]> 
    return this.http.get<Record[]>(

我了解，您的 http 请求实际上并未返回 Record 数组。它返回一个带有Record Array 字段的对象，这基本上是另一个Record 模型。它非常相似，但模型不同。

请考虑将其更改为：

interface RecordFromApi extends Record 
  startDate: string; // overwrite attribute


interface RecordResponse 
  records: RecordFromApi[];


getAllRecordsByEmployeeId(employeeId: number): Observable<Record[]> 
    return this.http.get<RecordResponse>(
        this.basePath
        + this.recordPath
        + this.recordEmployeeIdParam
        + employeeId,
        this.httpOptions)
        .pipe(
            map((res: RecordResponse) => res.records.map(record => mapRecord(record))), // mapRecord is a custom function which maps RecordFromApi model to Record model
        );
  

【讨论】：

谢谢。这是一个好主意，将大大提高我的代码质量！

【参考方案2】：

我们在我的应用程序中做了类似的事情。但不是返回

res.records as Record[]

我们这样做：

.pipe(
      map((records: Record[]) => records.map(records => new Record(record)))
);

然后在record.ts

export class Record 
  /*
    properties
  */
  date: Date;

  constructor(params: Partial<Record> = ) 
    this.date = new Date(params.date);
  

通过这种方式，您实际上可以获得类的实例，并且可以使用您的类中可能拥有的任何函数（这就是我们提出此解决方案时遇到的问题）。