javascript - API请求: better approach to set a Enum value

Question

后端有一个名为api/Options/GetEmailMessageTemplate的端点，它返回具有以下架构的对象:

{
  messageType: string, Enum: [ ConfirmationEmail, 
ConfirmationTransaction, RecoveryPassword, SetupAdminAccount, ConfirmationApiKey, ConfirmationDepositTransaction ]
  language: string, Enum: [ En, Ru, Zh, Es, Et ]
  subject: string,
  template: string,
  isUsed: boolean
}

例如回复:

{
  "messageType": 1,
  "language": "En",
  "subject": "string",
  "template": "string",
  "isUsed": true
}

这是编辑它的另一个端点 api/Options/Options/UpdateEmailMessageTemplate 它使用与上面相同架构的 json。 messageType 可以是 Enum 中元素的编号或 Enum 值(例如 'ConfirmationEmail')

在前端列出所有数据并能够更改它，我想出了这种方法:

1. 我制作了一个严格排序的数组:

messageTypes: [  
 { 
    name: 'Confirmation Email',
    success: false,
 },
...
]

需要成功才能显示此模板更改是否成功

我从后端获取messageType作为数字ID，我只是将其用作数组中的索引(因此，为了使其工作，我的数组必须以与该字段的枚举完全相同的方式排序是有序的)，以获取该 messageType 的名称并使用 success 字段进行操作

3.api/Options/Options/UpdateEmailMessageTemplate 使用当前正在编辑的元素的索引 (indexOf) 获取 messageType

虽然这种方法按预期工作，但我忍不住认为有更好的方法来处理这个问题。

我想听听是否有更好的做法来处理这个问题

Answer 1

根据我的理解，您需要一种使用友好的值列表及其 ID 的方法。一种方法是创建两个单独的类。这将使您能够将原始响应提供给单个模型，并且您可以添加翻译 id > name 所需的任何方法，或者反之亦然。

您可能会更喜欢使用 get/set 但我对要求仍然有点模糊。但是，这是我会采取的方法:

/**
 * Create a class that knows how to translate it
 * Bonus points: this could be populated via your endpoint
 * that returns your enum list so you don't have to keep
 * updating it if there's a change on the backend
 */
class MessageType {
  constructor(messageType) {
    this.id = messageType;
    const messageTypes = [
      'ConfirmationEmail',
      'ConfirmationTransaction',
      'RecoveryPassword',
      'SetupAdminAccount',
      'ConfirmationApiKey',
      'ConfirmationDepositTransaction'
    ];
    this.name = messageTypes[this.id];
  }
}

/**
 * Create a class / model for your response.
 * This will enable you to add any methods
 * needed for translating things how you need
 * them. For example, you might want a method
 * to convert your model into what the backend
 * expects.
 */
class MessageTemplate {
  constructor(response) {
    this.messageType = new MessageType(response.messageType);
    this.language = response.language;
    this.subject = response.subject;
    this.template = response.template;
    this.isUsed = response.isUsed;
  }
  getJsonPayloadForBackend() {
    const payload = { ...this };
    payload.messageType = payload.messageType.id;
    return payload;
  }
}

// Usage

const template = new MessageTemplate({
  "messageType": 2,
  "language": "En",
  "subject": "string",
  "template": "string",
  "isUsed": true
});

console.log(template);
console.log('data to send to backend', template.getJsonPayloadForBackend())