Question

我有一个函数可以像这样调用rest api：

getProducts(category: string): Observable<IProduct[]> {
    let url = `/rest/getproducts?category=${category}`;
    return this._http.get<IProduct[]>(url);
  }

该服务的响应如下：

[
  {
    "ProductId": 1,
    "CategoryType": "XC",
    "Name": "Prod A"
  },
  {
    "ProductId": 2,
    "CategoryType": "XY",
    "Name": "Prod B"
  },
]

我的模型如下：

export interface IProduct {
    id: string;
    type: string;
    name: string;
}

有没有一种方法可以轻松地将响应映射到我的模型？我应该使用地图功能吗？我知道我可以更改模型以适合响应，但是我想将响应压缩到我的模型中（该示例已简化）。

Answer 1

您的界面应如下所示，如果您不想对代码进行任何更改，可以在此处进行确认 json2ts

declare module namespace {
    export interface IProduct {
        ProductId: number;
        CategoryType: string;
        Name: string;
    }
}

否则，您可以使用array.map函数并自行生成数组。

Answer 2

最简单的解决方案是使用一个接口，该接口是来自服务器的实际数据的形状。减少头痛，无需映射，减少维护。

即使您想要进行一些映射，为服务器对象提供接口仍然是一个好主意，因此可以安全地进行映射：

interface IServerProduct {
    "ProductId": number;
    "CategoryType": string;
    "Name": string;
}

export interface IProduct {
    id: string;
    type: string;
    name: string;
}

getProducts(category: string): Observable<IProduct[]> {
    let url = `/rest/getproducts?category=${category}`;
    return this._http.get<IServerProduct[]>(url).pipe(
        map(o => o.map((sp): IProduct => ({ // IProduct specified here ensures we get excess property checks
            id: sp.ProductId + '', // number in server interface, map to string 
            name: sp.Name,
            type: sp.CategoryType,
            typeMisaken: sp.CategoryType, // error here
        })))
    );
}

对接口的角度可观察的http调用图响应

2 个答案: