Что лучше интерфейсы или классы для перехвата данных API в Angular 6

Question

У меня есть API, который возвращает данные JSON.

Возвращенные данные не структурированы так, как я хочу, поэтому я должен их изменить.

{  
   "@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 преобразуются в данные приложения.В зависимости от архитектуры вашего приложения это может быть, например, некоторый пользовательский компонент, пользовательский сервис или пользовательская модель.Говоря об услугах, я рассматриваю эту логику как часть 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, я бы предложил следовать «Шаблону модели-адаптера» .

По сути, вы создаете Мост (отделите абстракцию от ее реализации, чтобы они могли варьироваться независимо), и вы используете ее для создания любого экземпляра желаемой модели в вашем приложении.

Подробнее о мотивации можно прочитать здесь: https://dev.to/florimondmanca/consuming-apis-in-angular--the-model-adapter-pattern-3fk5