gpt4 book ai didi

javascript - 什么是更好的接口(interface)或类来拦截 Angular 6 中的 API 数据

转载 作者:行者123 更新时间:2023-11-30 20:07:04 26 4
gpt4 key购买 nike

我有一个返回 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)来完成?

最佳答案

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

关于javascript - 什么是更好的接口(interface)或类来拦截 Angular 6 中的 API 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52807176/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com