vue。组间公用走不同后台接口，后台返回数据字段名字不一样时，如何铺数据

Question

vue中。定义了公用组件，但不同的后台的接口返回数据中字段名称不一样，应该如何铺数据。我想到的是根据借口不一样去判断，但是不一样的字段名称太多反而显得冗余。还有就是后台改字段名称，但后台同学表示字段名称不同是为了不同接口做表识。
所以有没有好办法呢。求助大佬们

Answer 1

在组件中定义一个属性，假设叫 beforeDataProcess，该属性传入的是一个函数，作用就是：将后端返回的数据转化为组件需要的数据格式

举个例子，假设组件需要的数据格式是：

{
  name: 'xxx',
  id: 'xxx'
}

后端传的数据格式是：

{
  name: 'xxx',
  value: 'xxx'
}

此时我可以定义 beforeDataProcess 如下：

beforeDataProcess (rawData) {
  return {
    name: rawData.name,
    id: rawData.value
  }
}

那么拿到后端数据的时候，组件内部就可以调用 this.beforeDataProcess({ name: 'xxx', value: 'xxx' }) 将后端返回的数据转为组件需要的数据格式