【Vue】关于和后端对接数据，空值判断的问题

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

比如说前端要一个List，Array类型，但后端没查到，你想着会给你个[]，但就给你返回个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;
}

使用示例：

【Vue】关于和后端对接数据，空值判断的问题

跟后端说，不许返回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

以上是 【Vue】关于和后端对接数据，空值判断的问题 的全部内容， 来源链接： utcz.com/a/74924.html

回到顶部