前端 10 年經(jīng)驗常用的接口各種數(shù)據(jù)類型容錯寫法，保證前端頁面不炸掉

今天一個下拉框渲染，接口返回了[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 || ''

? ? }))

借此機會就梳理一下各種數(shù)據(jù)類型的兜底寫法

1、數(shù)組類型兜底

接口可能返回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、一定要記住，接口數(shù)據(jù)永遠不要直接用，一定先：

接口返回 → 數(shù)據(jù)清洗 → 頁面使用

基本思路：

數(shù)組 → safeArray

對象 → safeObject

字段 → || 默認值