API 请求：设置枚举值的更好方法

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,
 },
...
]

如果更改此模板成功则需要成功显示

1. 我从后端得到messageType作为一个数字ID，我只是将它用作我的数组中的索引（因此，为了使其工作，我的数组必须以完全相同的方式排序该字段的枚举），到获取该messageType 的名称并使用success 字段进行操作

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

虽然这种方法按预期工作，但我不禁想到有更好的方法来处理这个问题。

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

Answer 1

根据我的理解，您想要一种使用友好的值列表及其 id 的方法。一种方法是创建两个单独的classes。这将使您能够将原始响应提供给单个模型，并且您可以添加翻译 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())