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

当JSON数据转换为应用程序数据时,应该有一个单独的位置。取决于你的应用架构,它可能是一些用户组件,用户服务或用户模型。说到服务,我将此逻辑视为UserService(应用程序处理所有用户功能)甚至UserInfoService(仅处理UserInfo内容的子服务)的一部分。跳过用户组件方法我想起草一些关于用户模型方法的想法(我个人喜欢重模型):

用户信息界面

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);

"Model-Adapter Pattern" .

本质上,你创造了一个 Bridge (将抽象与其实现解耦,以便两者可以独立地变化),然后使用它在应用程序中创建所需模型的任何实例。

https://dev.to/florimondmanca/consuming-apis-in-angular--the-model-adapter-pattern-3fk5