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数据时，应该在一个位置。取决于您的App架构，它可能是某些用户组件，用户服务或用户模型。说到服务，我将此逻辑视为UserService（应用程序处理所有User功能）或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

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

2 个答案: