前端 10 年经验常用的接口各种数据类型容错写法，保证前端页面不炸掉
今天一个下拉框渲染，接口返回了[null, null, null]导致页面崩了
<el-select
v-model="currentEditRow.approverNumbers"
placeholder="请选择"
clearable
style="width:100%"
@change="approverNumbersChange"
>
<el-option
v-for="item in safeNodeList"
:key="item.approverNumber"
:label="item.approverName"
:value="item.approverNumber"
/>
</el-select>
解决办法： this.nodeList = (res.data || []).filter(Boolean)
最保险写法：
const formatNodeList = list =>
(Array.isArray(list) ? list : [])
.filter(Boolean)
.map(item => ({
approverName: item.approverName || '',
approverNumber: item.approverNumber || ''
}))
借此机会就梳理一下各种数据类型的兜底写法
1、数组类型兜底
接口可能返回null、undefined、{}、[null, null]
兜底写法：this.nodeList = Array.isArray(res.nodeList) ? res.nodeList.filter(Boolean) : []
2、对象类型兜底
接口可能返回null、undefined
兜底写法：this.detail = res.detail || {}
3、 对象内字段类型兜底
接口可能返回防止 undefined
兜底写法：const name = res.name || ''
4、可以写在公共方法里的两个兜底方法
export const safeArray = (arr = []) => Array.isArray(arr) ? arr.filter(Boolean) : []
export const safeObject = (obj = {}) => obj || {}
使用方法：
this.nodeList = safeArray(res.nodeList)
this.detail = safeObject(res.detail)
5、一定要记住，接口数据永远不要直接用，一定先：
接口返回 → 数据清洗 → 页面使用
基本思路：
数组 → safeArray
对象 → safeObject
字段 → || 默认值
