处理将 API 对象映射到 UI 模型对象的模式

Question

我正在切换以使用新的 HttpClient 角度。

正在调用的 API 以一种格式返回 json 数据。我想获取这些数据并将其转换为适合 UI 使用的打字稿模型类。

我之前这样做的方法是使用 map 函数，例如

        return this.httpClient.get(url, { headers: headers })
        .map(mapFunction)
        .catch(errorFunction);

map 函数在模型对象中执行转换 api 响应的繁重工作，例如

 const mapFunction =
            (response: Response) => {
                const data = response.json();
                const contacts: Contact[] = [];
                let i = 0;
                for (const result of data.resourceResults) {
                    i = i + 1;
                    const contact: Contact = new Contact();
                    contact.role = result.r

对我来说，这似乎很麻烦，我基本上是在寻找一种方法来将对象从 api 响应类型映射到 ui 模型类型，而不必为每个请求使用自定义映射函数。

Answer 1

如果没有明确指定需要映射的内容，就无法进行自定义映射。要么你告诉服务器端返回一个 UI 友好的响应，要么你需要在客户端自己进行映射。

如果您想在客户端映射响应，您可以利用 Typescript 类，并使用它 constructor 来快速生成您想要的项目：

export class Contact {
    public name:string;
    public roles:any;
    constructor(name:string, roles: any) {
        //specify your own constructor logic
        this.name=name;
        this.roles=roles
    }
}

现在您可以写入您的内容mapFunction以将响应显式转换为 s 列表Contact。此外，您可以使用数组.map()来迭代对象，而无需编写 for 循环：

public mapFunction = (response: Response) => {
    const data = response.json();
    const resource = data.resourceResults;
    //map it
    return resource.map(result => new Contact(result.n, result.r))
}

繁琐与否，我认为这是主观的。但你绝对可以用更优雅的方式编写代码。