javascript - 想问下大家对于vue api返回的数据是如何处理的？

Question

想问下大家使用vue的时候，对于api返回的数据是如何进行处理的，有时候api返回的是数字，前端需要搞个字典映射，最常见的就是性别
res.data 通常就是 { name: aaa, sex: 1, type: 3 ... }
我也是用一个itemData = res.data 去接收
当我有多个这种映射值需要转换的时候，而我该如何让代码尽量好维护？
目前我能想到的方法：

1. computed计算属性

   computed: {
    sex() {
        if...return
        else...return
    },
    type() {
        switch(this.itemData.type) {
            case.....
        }
    }
   }

   该方法简单直接，也很容易想到，但是个人认为当需要映射的属性多了之后，每多一个这样的属性就需要写一个计算属性，多了conputed里面就很冗余，并且计算属性都是放在this下，我想把映射的属性统一放在itemData，这样我就可以itemData.xxx就可以调用

想问问各位大佬平时都是怎么做的？

Answer 1

方法一（适合数据少的）：

直接在template里面{{['男','女'][itemData.sex-1]||'未知'}},如果sex不是有规律的则换成{}的取值方式

方法二（数据多，映射的数据在多个地方使用，比如筛选,或其他功能是同样的数据）：

使用全局的filters:

Vue.filter("getNameById", (id, options, key = "name", valueKey = "id") => {
  const curItem = options.find(r => r[valueKey] == id) || {};
  return curItem[key];
});

创建映射配置：

export const statusOption = [
  {
    id: 1,
    name: "正常"
  },
  {
    id: 2,
    name: "回收"
  }
]

template中使用:
{{itemData.type|statusOption(statusOption)}}

方法三（数据不需要复用）:

直接文件内写filters,里面switch

Answer 2

虽然这于这样在单页面中是简单粗暴的，通过判断就可以获取对应字段映射的值，但造成一个困扰就是冗余代码，数据特殊的情况就是判断太多；

既然判断多，那换一种想法，前端写一个枚举或者配置文件，用于存储映射关系的map,

// aMap 和 bMap 分情况， 一个对象一个数组，看自己的场景
// 一种对象格式，一种数组格式
expost const aMap = {
    1: '男生',
    2: '女生',
    ...
}
export const bMap = [
    {type: 3, name: '男生'},
    {type: 2, name: 'aa'},
]

const getMapName = (type) => {
    return aMap[type]
}

const getMapNameB = (type = 2) => {
    return bMap.find(item => item.type == type)
}

在页面中展示的话

<div>{{getMapName(this.itemData.type)}}</div>
<div>{{getMapNameB(this.itemData.type)}}</div>

只需要一个配置文件，一个获取对应的方法就能获取到对应的值；

一个简单的场景如下：
请求中有code字段，200代表成功，500代码服务器错误，404代码地址不存在；但是我想要判断不同的code代表什么或者不同的code其他的逻辑

这样配置+方法的使用避免js判断逻辑多，同事也避免了下面例子页面中常规的判断模式如下：

{{ type == 1 ? 'a' : type == 2 ? 'b' : type == '3' ? 'c' : ''  }}

Answer 3

methods: {
    mapData(data) {
        let mappedData = { ...data };

        let sexMap = { '1': '男', '2': '女' };
        let typeMap = { '1': '类型1', '2': '类型2', '3': '类型3' };

        mappedData.sex = sexMap[data.sex];
        mappedData.type = typeMap[data.type];

        return mappedData;
    }
}

Answer 4

一般这种直接写在结构里面: