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

  • Z时代
  • 2024-02-08
  • 分类：IT

想问下大家使用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就可以调用

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

回答：

一般想问下大家对于vue api返回的数据是如何处理的？这种直接写在结构里面:
想问下大家对于vue api返回的数据是如何处理的？

回答：

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

回答：

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

既然判断多，那换一种想法，前端写一个枚举或者配置文件，用于存储映射关系的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' : ''  }}

回答：

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

直接在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

回答：

我们这边一般都是把这些存数据库，后端提供接口来查询。

如果前端来做的话，无非也就是维护各种类型的字典项。
简单点可以这样来写。

const Dictionary = {
    // 这里sex就是类型
    'sex' : {
        1 : '男',
        2 : '女',
    }
}

然后再提供一个查询的方法。

const findName = (type,key) => Dictionary[type][key]

最后就在模板里这样写就行。

<div>{{findName('sex','1')}}</div>

当然，你也可以在此基础上再封装一个展示的组件。

<template>
    <div>{{value}}</div>
</template>
<script>
export default {
    props:{
        type:String,
        typeKey:String,
    },
    computed:{
        value(){
            return findName(this.type,this.typeKey)
        },
    }
}
</script>

回答：

建议抽离出公共的enum文件，哪里引用，哪里使~

export const SexEnumList [
  { label: '男', value: 1 },
  { label: '女', value: 2 },
]
// 使用[使用前记得空值校验，否则会报错]
SexEnumList.filter( item => item.value === res.data.sex)[0].label

回答：

jeecg 或ruoyi 等框架你可以看一下。

jeecg 是全局初始化时全部加载字典。
ruoyi 是页面初始化时单独加载字典。

都会提供一个根据字典名称和值获取值名称的方法。

回答：

return {

        id: item.id,
        status: item.status,
        inStatus: item.status === -1,
        endStatus: item.status === 1,
        outStatus: item.status === 0

}

以上是 想问下大家对于vue api返回的数据是如何处理的？ 的全部内容， 来源链接： utcz.com/p/934330.html

回到顶部