H5W3
当前位置:H5W3 > 其他技术问题 > 正文

关于和后端对接数据,空值判断的问题

大家在拿到后端的数据,要绑到页面上的时候,空值判断一般是怎么处理的?

比如说前端要一个ListArray类型,但后端没查到,你想着会给你个[],但就给你返回个null,这就导致前端取length的时候就报错了,难道每次都要写if判断吗?

if (res.list !== null) {
    this.list = res.list;
}

请问有什么干净效率的办法?

回答:

假如后端返回res对象,res.body希望是个数组,但是实际返回一个null

那么在不考虑深复制浅复制问题的前提下

let newArray = res.body || []

console.log(newArray.length)

这样至少可以保证不会得到null

回答:

此类问题,个人建议封装一个函数统一处理下,我这边写了一个仅供参考,这也是我们目前使用的方案:

// Object、Array、String、Number、Boolean、Function
function typeOf (obj) {
  return toString.call(obj).slice(8, -1)
}

function isEmpty (obj) {
  let bool = false;
  switch (typeOf(obj)) {
    case 'Object':
      bool = Object.keys(obj).length ? true : false; // 这是es6写法 您也可以用JSON.stringify(obj) == '{}' 或  用for ... in
      break;
    case 'Array':
      bool = obj.length ? true : false;
      break;
    default:
      bool = obj ? true : false;  // 对于String、Number、Boolean、Function这几种类型,您可以根据自己的需求添加相应的逻辑
  }
  return bool;
}

使用示例:

clipboard.png

回答:

跟后端说,不许返回null。他不干就揍他,你要是打不过,就乖乖加判断

回答:

可以写成这样,this.list = res.list || []。

回答:

这是后端返回的数据不规范造成的,你可以要求后端修改。不过前端也有处理办法。比如:收到这样的数据:var result = {“status”:0,”data”:{“books”:null,”total”:”0″},”message”:””},你可以这样做
result.data.books = result.data.books || []

回答:

//我是这么写的
//数组 前者可判断为null,后者为[]
if( !res.list || res.list.length == 0 ) return;
.... //要做的事情
//对象格式 {"status":0,"data":{"books":null,"total":"0"},"message":""}
if( !res || res.message == false) return;
.... //要做的事情  
 

回答:

有一种能比这种有效率一点,三目运算符,还加了一个空值的显示。{{ list!=null?list:”-” }}
或者说如果都没数据,就不显示这部分,那么可以<template v-if=”list!=null?true:false”>你的内容</template>

回答:

后端输出json类型数据,前端js把json字符串解析为js对象(JSON.parse()),若是空,那不就自动获取到了[]或{},我是这样认为的

回答:

根据你的需求,还是去攻略后端别给空吧。

回答:

需要根据业务逻辑来确定再向下走下去不正交(也就是会对其他地方有影响)那么立即阻止,否则就像你说的,只是单纯的数据类型变化了,可以根据场景自己写个util嘛,接6大数据类型,根据数据格式的不同还可以扩展(比如blob类型等等), validateDataType(String,var,(err)=>{}) 如果是多层嵌套判断值的存在, throw Error || callback 都可以呀,推荐使用类似 loadsh 里面的get解决,.

永远记住一个道理,不经过抽象的代码就像一盘散沙,积累的越多,到时候你收拾的越麻烦。。千万不能每个地方写if

本文地址:H5W3 » 关于和后端对接数据,空值判断的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址