关于对象里面有很多参数需要处理的问题

比如说这种情况，从后端请求一个接口，然后返回的值里面有部分需要重新组装成前端需要的格式，而有部分又不需要，这时就会有很长的一段代码，如下：

const data = await getShopDetail({id})
let detail = {}
// 下面只给出了几种情况，实际是有更多的情况的
// 不需要改动
detail.name = data.name

// 这里处理时间
detail.created_at = day(data.created_at)

// 一些判断处理
detail.status = data.status.toString() ? data.status.toString() : ''

// 判断有没有时间然后再处理
if (data.cosume_times) {
  const [start, end] = data.cosume_times.split('-')
  detail.cosume_times_start = day(start, 'HH:mm')
  detail.cosume_times_end = day(end, 'HH:mm')
}

// 做图片处理
detail.img = data.img ? JSON.parse(data.img) : []
detail.img.forEach((item, index) => {
  ...
})

// 数组里面做一些运算处理
data.info.forEach(item => {
  if (item.type === 1) {
    detail.count = item.count
    detail.rate = NP.divide(item.rate, 100)
    if (item.food_type === 1) {
      detail.price = NP.divide(item.price, 100)
      detail.weight = NP.divide(item.weight, 100)
    } else {
      ...
    }
  } else {
    ...
    if (item.food_type === 1) {
      ...
    } else {
      ...
    }
  }
})

// 做一些运算处理
detail.profit = data.profit !== '' ? NP.divide(data.profit, 100) : ''

this.setState({
  detail
})

相应的获取详情之后编辑提交的时候肯定也会有如上类似的处理组装成后端需要的格式，同样也是一大段类似的代码，请问大佬这种该怎么优化呢？

lihongjie0209

2019-12-13 16:08:39 +08:00

你写后端也会有这个问题，在前端看来是一个接口，其实后端调用了 N 个外部接口+N 个数据库查询然后再组装计算出来的。只要是系统集成对接就会有这个问题，所以，慢慢写喽。

至于说让后端把数据处理好给前端？？一个接口写 N 次就是为了小程序和安卓 UI 上一个字段的格式不同？？？

后端接口要具有一定的抽象，把一些共性的东西确定好，把一些通用的东西规范化，这样才能足够灵活。

比如说一个日期格式，小程序端需要显示 20190101，安卓端需要显示 2019/01/01, 后端需要把这个抽象出来，然后规范化：返回一个日期 2019-01-01，至于说怎么展示，那么每个客户端都按照自己的需要去格式化就好了，后端只需要保证数据是能够覆盖客户端的需求就好了

zzlit

2019-12-13 16:28:41 +08:00

@guyeu 但我觉得引入工具库又额外增加成本了。。
@kiracyan 但是后台传过来的数据总还是需要进行处理，可能没有我例子那么多罢了
@rain0002009 就是字符串。。。
@KuroNekoFan 其实根本的解决方法的确是这样的，只是就目前来看是不可能了，所以就想看看有没有什么好一点的写法
@lihongjie0209 谢谢指点！

Light3

2019-12-13 16:35:13 +08:00

是这样的看你和后端能不能沟通了...
反正至少要有一方的代码是这样的
或者两方都是
因为后端很多的数据也是数据库查询拼接然后转换给你的..
我之前写的接口基本都是让前端当傻瓜直接拿值显示就行了..

不过作为成长个人觉得还是更多的学习处理数据会带来提高 (因我认识个哥们直接数据库查出来就抛出来了前端自己想办法)