鍍金池/ 問(wèn)答/HTML/ vue。組間公用走不同后臺(tái)接口，后臺(tái)返回?cái)?shù)據(jù)字段名字不一樣時(shí)，如何鋪數(shù)據(jù)

vue。組間公用走不同后臺(tái)接口，后臺(tái)返回?cái)?shù)據(jù)字段名字不一樣時(shí)，如何鋪數(shù)據(jù)

vue中。定義了公用組件，但不同的后臺(tái)的接口返回?cái)?shù)據(jù)中字段名稱不一樣，應(yīng)該如何鋪數(shù)據(jù)。我想到的是根據(jù)借口不一樣去判斷，但是不一樣的字段名稱太多反而顯得冗余。還有就是后臺(tái)改字段名稱，但后臺(tái)同學(xué)表示字段名稱不同是為了不同接口做表識(shí)。
所以有沒(méi)有好辦法呢。求助大佬們

回答
編輯回答
風(fēng)畔

在組件中定義一個(gè)屬性，假設(shè)叫 beforeDataProcess，該屬性傳入的是一個(gè)函數(shù)，作用就是：將后端返回的數(shù)據(jù)轉(zhuǎn)化為組件需要的數(shù)據(jù)格式

舉個(gè)例子，假設(shè)組件需要的數(shù)據(jù)格式是：

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

后端傳的數(shù)據(jù)格式是：

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

此時(shí)我可以定義 beforeDataProcess 如下：

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

那么拿到后端數(shù)據(jù)的時(shí)候，組件內(nèi)部就可以調(diào)用 this.beforeDataProcess({ name: 'xxx', value: 'xxx' }) 將后端返回的數(shù)據(jù)轉(zhuǎn)為組件需要的數(shù)據(jù)格式

2018年8月14日 05:47