首頁猿問關(guān)于和后端對(duì)接數(shù)據(jù)，空值判斷的問題

關(guān)于和后端對(duì)接數(shù)據(jù)，空值判斷的問題

JavaScript

慕斯王 2019-03-07 14:49:43

大家在拿到后端的數(shù)據(jù)，要綁到頁面上的時(shí)候，空值判斷一般是怎么處理的？比如說前端要一個(gè)List，Array類型，但后端沒查到，你想著會(huì)給你個(gè)[]，但就給你返回個(gè)null，這就導(dǎo)致前端取length的時(shí)候就報(bào)錯(cuò)了，難道每次都要寫if判斷嗎？if (res.list !== null) { this.list = res.list;}請(qǐng)問有什么干凈效率的辦法？

查看完整描述

8 回答

aluckdog

TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超7個(gè)贊

跟后端說，不許返回null。他不干就揍他，你要是打不過，就乖乖加判斷

1 反對(duì) 回復(fù) 2019-03-15

慕的地8271018

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

假如后端返回res對(duì)象，res.body希望是個(gè)數(shù)組，但是實(shí)際返回一個(gè)null

那么在不考慮深復(fù)制淺復(fù)制問題的前提下

let newArray = res.body || []

console.log(newArray.length)

這樣至少可以保證不會(huì)得到null

反對(duì) 回復(fù) 2019-03-15

qq_笑_17

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊

可以寫成這樣，this.list = res.list || []。

反對(duì) 回復(fù) 2019-03-15

交互式愛情

TA貢獻(xiàn)1712條經(jīng)驗(yàn) 獲得超3個(gè)贊

有一種能比這種有效率一點(diǎn)，三目運(yùn)算符，還加了一個(gè)空值的顯示。{{ list!=null?list:"-" }}
或者說如果都沒數(shù)據(jù)，就不顯示這部分，那么可以<template v-if="list!=null?true:false">你的內(nèi)容</template>

反對(duì) 回復(fù) 2019-03-15

四季花海

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊

后端輸出json類型數(shù)據(jù)，前端js把json字符串解析為js對(duì)象（JSON.parse()），若是空，那不就自動(dòng)獲取到了[]或{}，我是這樣認(rèn)為的

反對(duì) 回復(fù) 2019-03-15

慕蓋茨4494581

TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊

//我是這么寫的

//數(shù)組前者可判斷為null,后者為[]

if( !res.list || res.list.length == 0 ) return;

.... //要做的事情

//對(duì)象格式 {"status":0,"data":{"books":null,"total":"0"},"message":""}

if( !res || res.message == false) return;

.... //要做的事情

反對(duì) 回復(fù) 2019-03-15

慕村9548890

TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊

需要根據(jù)業(yè)務(wù)邏輯來確定再向下走下去不正交(也就是會(huì)對(duì)其他地方有影響)那么立即阻止，否則就像你說的，只是單純的數(shù)據(jù)類型變化了，可以根據(jù)場(chǎng)景自己寫個(gè)util嘛，接6大數(shù)據(jù)類型，根據(jù)數(shù)據(jù)格式的不同還可以擴(kuò)展(比如blob類型等等), validateDataType(String,var,(err)=>{}) 如果是多層嵌套判斷值的存在, throw Error || callback 都可以呀，推薦使用類似 loadsh 里面的get解決,.

永遠(yuǎn)記住一個(gè)道理，不經(jīng)過抽象的代碼就像一盤散沙，積累的越多，到時(shí)候你收拾的越麻煩。。千萬不能每個(gè)地方寫if

反對(duì) 回復(fù) 2019-03-15