Angular 请求带有元数据的类型化响应数据答案

【问题标题】：Angular requesting typed response data with metadataAngular 请求带有元数据的类型化响应数据
【发布时间】：2021-12-08 20:17:50
【问题描述】：

我的后端的所有响应（不包括错误）都以这种格式返回：

{
   "data": [
      ...
   ]
   "meta": { //Always same structure
      "itemsPerPage": 20
      "offset": 0
      "pages": 6554
      "total": 131071
   }
}

在角度上，接口：

export interface user {
   name: string
   id: number
}

export interface meta {
   itemsPerPage: number
   offset: number
   pages: number
   total: number
}

提出请求

this.http.get<user[]>(...).subscribe(data => {
   this.users = data.data;
   this.meta = data.meta
})

如何在此处设置正确的响应类型（我期望 user[] 类型的属性数据和 meta 类型的元数据）？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

您可以在此处使用泛型，以便重用接口。

export interface IDataResponse<T> {
    data: Array<T>;
    meta: {
       itemsPerPage: number;
       offset: number;
       pages: number;
       total: number;
    };
}

现在在您的通话中指定。

this.http.get<IDataResponse<user>>('url/here')
  .subscribe(response => /* do something with the response */);

【讨论】：