javascript - 什么是更好的接口(interface)或类来拦截 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 接口(interface)来完成？

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[],
   // ...
}

用户信息.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);