后端返回null，前端怎么处理？数据容错——不用过分相信外部数据

场景

我们在开发过程当中，总是会遇到因为数据原因，导致使用数组方法或者获取对象属性的时候报错。

xxx is not fuction

Cannot read property xxxx of undefined

因为这些错误，会导致直接页面打不开，所以我们一般会做一些容错处理，从而让页面可以正常打开。例如：&& 、三元运算符，甚至有时会看到 if 语句来处理。

常见方式

 // response 是来自接口的数据
 const response = {
     code: 200,
     msg: 'message',
     data: {
         total: 100,
         page: 1,
         pageSize: 10,
         content: []
     }
 }

 const goodsList = response.data.content.forEach(() => {})
 const total = response.data.total

为了保证取data、content属性和使用forEach不报错，可能会这样做

 const goodsList = response.data && response.data.content && response.data.content.forEach(() => {})
 const total =  response.data && response.data.total

这样就初步完成了数据容错，但是代码过于冗余可读性差，而且 total 的值还会可能变成 Boolean 类型。

简单改进

只需要简单的两个处理，一个是解构，一个是给默认值

 const { data = {} } = response
 const { constent = [], total = [] } = data
 goodsList.forEach(() => {})

解构是非常有必要的，增加代码可读性和扁平化数据

不过，但这里又有了新的问题。这个时候如果我得到数据如下的样子：

 const response = {
     data: null
 }

那么解构就会报错 Cannot destructure property content of 'undefined' or 'null'

默认值生效的条件是，对象的属性值严格等于undefined

上面代码中，属性data等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值 {} 不会生效。实际就成了如下的样子：

 const { constent = [], total = [] } = null 

因此我们得保证拿到的数据不能存在null，不然上面的代码就没意义了。

进一步改进

你可能在想和后端约定好不返回 null 就好了

但是不能过分相信外部数据，包括约定之后的

这种情况其实可以在封装axios 或者fetch的时候，在里面添加一个过滤的函数，把从接口拿到的数据过滤一下，过滤掉值为 null 的数据，或者是把为 null 的数据重新赋值为 undefined。

下面是过滤数据的函数

 // 把获取到的数据过滤一遍
 const replaceNull = (obj) => {
     for (let key in obj) {
         switch (Object.prototype.toString.call(obj[key]).slice(8, -1)) {
             case 'Object':
                 replaceNull(obj[key])
                 break;
             case 'Array':
                 for (let i = 0; i < obj[key].length; i++){
                     replaceNull(obj[key][i])
                 }
                 break;
             default:
                 if (obj[key] === null) obj[key] = undefined;
         }
     }
 }

过滤之后，这个时候这种写法就没问题了

 const { data = {} } = response
 const { constent = [], total = [] } = data
 goodsList.forEach(() => {})

当然如果你们有node作为中间层，前端视图层是可以放心的使用解构默认值的，比如 graphQl 这种。

结束语

前端数据容错处理是必须的，不能期待外部数据的格式就是自己想要的。不知道大家平时都是怎么处理的。