前端数据异常处理

背景

在一些情况下，会产生后端返回的数据为空的情况，这时可能会导致浏览器报错而终止页面的正常加载和渲染，因此需要做前端的数据异常处理。 当然最好的情况是后端写了规范的接口并且有接口文档。 在没有接口文档的情况下，做异常处理就更有必要了。

最佳实践是做异常处理，对大家都好。

异常产生的可能情况

1. 后端查询sql时，在数据为空的时候没有做处理，直接返回了null
2. array非空，但不存在对应的key导致取不到value
3. array非空，存在对应的key但对应的value为空
4. 级联调用，比如ObjA.ObjB.key，类似2、3

异常处理

1 赋值时做判断

axios.get(url).then(res => {
  //返回array
  let data = res.data || []
  //返回object
  let data = res.data || {}
  //返回string
  let data = res.data || ''
})

2 级联查询时判断是否有key

也可直接判断

if(!obj.hasOwnProperty('key')) {//数据为空时的处理} 
else {
    data = obj.key;
}
if(obj.key){} //直接判断

3 错误捕获

有时候，项目开发极不规范，根本不知道后台返回的可能情况，这个时候建议直接跑了（bushi）。

咳咳，回到正题。

使用try/catch，进行错误处理，适用于任何可能发生错误的情况。

try {
    //可能发生错误的代码块
} catch(e) {
    //错误处理逻辑
}