什么是更好的接口或类来拦截 Angular 6 中的 API 数据

Question

我有一个返回 JSON 数据的 API。

返回的数据不是我想要的结构，所以我必须改变它。

{  
   "@odata.context":"xxxxxx",
   "id":"xxxxxxxx",
   "businessPhones":[  

   ],
   "displayName":"name",
   "givenName":"pseudo",
   "jobTitle":null,
   "mail":"hamza@mail.co",
   "mobilePhone":null,
   "officeLocation":null,
   "preferredLanguage":"fr-FR",
   "surname":"Hadda",
   "userPrincipalName":"hamza@mail.co"
}

这是我的界面

export interface UserInfos {
    odataContext: string;
    id: string;
    businessPhonesNumbers: any[];
    fullName: string;
    givenName: string;
    jobTitle: any;
    mail: string;
    mobilePhoneNumber: any;
    office: any;
    Language: string;
    surname: string;
    userPrincipalName: string;
}

我想知道在我的对象中拦截数据和位置的优化方法是什么。我应该创建一个类并在构造函数中传递 API 响应来构建我的数据，还是可以使用 TS 接口来做到这一点？

Answer 1

在将 JSON 数据转换为 App 数据时应该有一个位置。取决于您的应用架构，它可能是例如某些用户组件、用户服务或用户模型。说到服务，我将此逻辑视为 UserService（应用程序处理所有用户功能）甚至 UserInfoService（仅处理 UserInfo 内容的子服务）的一部分。跳过用户组件方法我想起草一些关于用户模型方法的想法（我个人喜欢重型模型）：

user-info.interface.ts

export interface IUserInfo {
  odataContext: string;
  id: string;
  businessPhoneNumbers: any[];
  // ...
}

export interface IUserInfoJson {
  '@odata.context': string;
  'id': string,
  'businessPhones': any[],
   // ...
}

user-info.class.ts

import { IUserInfo, IUserInfoJson } from './user-info.interface.ts';

export class UserInfo implements IUserInfo {

  // JSON specific properties
  odataContext: string;
  id: string;
  businessPhoneNumbers: any[];
  // ...

  // other properties
  fromJsonObj: boolean;

  constructor(userInfoJson: IUserInfoJson) {  
    const isObj = userInfoJson && typeof userInfoJson === 'object' && userInfoJson.constructor === Object;
    this.fromJsonObj = isObj;

    // JSON mapping
    this.odataContext = isObj ? userInfoJson['@odata.context'] : '';
    this.id = uisObj ? serInfoJson['id'] : '';
    this.businessPhoneNumbers = this.parseBusinessPhoneNumbers(userInfoJson);
    // ...
  }

  parseBusinessPhoneNumbers(userInfoJson: IUserInfoJson): any[] {
    return this.fromJsonObj && userInfoJson['businessPhones'] && userInfoJson['businessPhones'].length
      ? userInfoJson['businessPhones'].map(...)
      : [];
  }

}

然后

const userData = new UserInfo(<IUserInfoJson>response);

Answer 2

在@jonrsharpe 评论之后，我将补充一点，如果您与 API 交互，我建议您关注"Model-Adapter Pattern"。

本质上，您创建了一个Bridge（将抽象与其实现分离，以便两者可以独立变化），然后使用它在应用程序中创建所需模型的任何实例。

您可以在此处阅读有关动机的更多信息： https://dev.to/florimondmanca/consuming-apis-in-angular--the-model-adapter-pattern-3fk5