angular - http.get().pipe() - 无法从服务器获取实际响应对象以进行日志记录

Question

用例 - 对服务器进行 http get 调用。记录来自服务器的实际响应。转换响应对象（将纪元日期字段转换为 javascript 日期）。然后返回转换后的对象。

代码片段 -

/** GET users from the server */
  getUsers(): Observable<IUser[]> {
    this.logger.log(`GET on ${this.baseUrl}`);
    return this.http.get<IUser[]>(this.baseUrl).pipe(
      tap(users => this.logger.log(`fetched users - `, users)),
      map(users => {
        return users.map(user => this.convertResponse(user));
      }),
      catchError(handleError.bind({ logger: this.logger }))
    );
  }

目前我正在使用 tap() 来记录响应。然后使用 map() 转换响应对象。但是显示的日志消息是转换后的对象，而不是来自服务器的原始响应。

如何在转换之前捕获响应对象？

编辑 -

  private convertResponse(user: IUser): IUser {
    user.createdDate = new Date(user.createdDate);
    user.modifiedDate = new Date(user.modifiedDate);
    return user;
  }

标签： angularrxjs

Answer 1

您的convertResponse方法对数组中的对象进行了变异（然后返回变异的对象）。您确实记录了数组的“未转换”版本，但是当您在开发人员工具中点击“expend”时，突变已经发生，您正在查看突变发生后对象的样子。

在 Chrome 中展开对象时，如果将蓝色“i”工具提示悬停在展开旁边，您会看到此警告。

更改您的convertResponse方法以返回一个新对象。

  private convertResponse(user: IUser): IUser {
    return {
      ...user,
      createdDate = new Date(user.createdDate),
      modifiedDate = new Date(user.modifiedDate),
    }
  }