背景
项目中后端返回数据好多是null,到了前端渲染页面就会造成空白,当前做的事vue项目,有两种方案:
方案
- 利用vue的过滤器,可以每个页面渲染的时候利用过滤器过滤一下(data | filter)、也可以全局注册过滤器,好处就是不需要每个页面注册只需要全局注册一次,需要用的时候直接在插值表达式中调用就好了,但是还是有些麻烦;
- 可以在处理后端返回数据的时候统一处理下,在封装好的request.js响应中过滤一下就不用在每个页面都处理了,利用递归判断每一层数据,如果是null直接转化成‘-’,代码如下
function removeNull(data, defaultStr= '-') {
if(typeOf data != 'object' || data == 'null') {
return defaultStr
}else {
return data;
}
}
for(const v in data){
if(data[v] == null || data[v] == 'null') {
data[v] = defaultStr;
}
if(typeOf data[v] =='object') {
removeNull(data[v])
}
}
}
removeNull(res) // 调用生效
还有另外一种解决办法就是你让后端给你转化好在返回,就什么都不用操作了 0.0