关于后台返回的数据解析

Question

取这种层级的数据，真的是很难受，有什么好的前台处理方式吗？

Answer 1

题主的真实需求描述的不太明确，只能臆测下先
需求1：不想写深层次的数据判断，和取层级结构的数据

if(data && data.page && data.page.total && data.page.count){
    paginationHandler[hash](data.page.total, data.page.count)
}

其实这一步的简化是最简单的，向其他人回答的一样，和后端做好约定，保证这几个值都是有默认值的

// 简化后就一句直接调
paginationHandler[hash](data.page.total, data.page.count)

但是，如果碰到个死脑筋的后端怎么办呢！？

1. 先向他的直属领导反应
2. 进行解构

// data和data.page肯定会是有默认值的，如果这都没有，直接投诉好了
const {total, count} = data.page

paginationHandler[hash](total, count)

1. 对分类数据抽像，定义分页操作实例

(题主问题中的第二段代码建议采用此方式)

// 所有的其他深层次的业务都可以这样处理，前端转换后端接口的数据结构，自已维护
class Pagination {
    ...
}
const page = new Pagination(data)

paginationHandler[hash](page.total, page.count)

Answer 2

let {page = {}, stationLetterInfo = {}} = data;
function paginationHandle({total: 0, count: 0}) {
    // ...
}
paginationHandle(page);
// 另一个函数也一样

有一点注意的是参数默认值只有在undefined情况下生效，需要和后台同学做好沟通

Answer 3

lodash的_.get(obj,path)
如果不存在路径会返还undefined而不是报错

Answer 4

只需要判断整体的 正确 还是 错误，格式的事，后端处理好。出错了找后端。

Answer 5

我看你的意思是不想写那么长的&&。
typescript 有个语法糖是 a?.b?.c 即是说有a的情况下接着才去判断a.b 以此类推。要不你自己封装一个小函数判断一下，比如

var data = {
            page: {
                count: '',
                total: 1
            }
        }
        function fn(param, data) {
            if (data) {
                return param.split('?.').every(function (v) {
                    return data[v] ? (data = data[v] , true) : false
                })
            }
            else {
                return false
            }
        }
        // 判断的时候就
        if(fn('page?.count', data)) 这样
        

这里只给你提供一个简单的思路，代码不够严谨，比如0的时候也被隐式转换false了。

不过遇到这种情况最好的处理方法，就是跟后端沟通一下。毕竟是团队协作开发，沟通也是职场的重要技能。

Answer 6

做分页这个业务就是比较麻烦。要不然分页这个功能你让后端做，你只用调用方法，传入数据即可。

Answer 7

/**
 * 安全的获取值
 *
 * safe_get(obj, 'a.b.c') // 123
 * safe_get(obj, 'a.b.d', '我是默认值') // 我是默认值
 *
 * @export
 * @param {*} targetObj
 * @param {string} keyString
 * @param {*} defaultValue
 * @returns {*}
 */
export function safe_get(targetObj: any, keyString: string, defaultValue: any): any {
  const path = String(keyString).split('.');
  const result = path.reduce((preObj, curPath) => {
    return (preObj !== null && !is_undefined(preObj))
      ? preObj[curPath]
      : preObj;
  }, targetObj);

  return is_undefined(result)
    ? (is_undefined(defaultValue) ? result : defaultValue)
    : result;
}