從前
有個(gè)前端公陳尸正在開發(fā)微信小程序戏售，
服務(wù)器端和前端約定好一個(gè)接口應(yīng)該返回這樣一個(gè)json：
'{"res":{"data":{"userInfo":{"card":{"name":"zhangyin"}}}}}';
于是霸旗，前端在收到服務(wù)器端返回的json后這樣寫到：
var name = res.data.userInfo.card.name;
var title = "hello " + name;
通常签舞，上面這樣寫是ok的秕脓。
不過，后來服務(wù)器端同學(xué)重構(gòu)代碼時(shí)儒搭，發(fā)現(xiàn)某個(gè)用戶并沒有card數(shù)據(jù)吠架，于是在返回的數(shù)據(jù)就變成了以下這樣：
{"res":{"data":""}}
于是，前端代碼在執(zhí)行到這句時(shí)就發(fā)生error了：
var name = res.data.userInfo.card.name;
并且后面的代碼也不會(huì)繼續(xù)執(zhí)行了搂鲫，如果后續(xù)代碼有一些很重要的邏輯也會(huì)被錯(cuò)過了傍药。
而且前端用戶也無法看到相應(yīng)的錯(cuò)誤處理提示；
我們可以使用try ... catch來捕獲錯(cuò)誤魂仍，然后進(jìn)行處理拐辽；
也可以對json中的逐個(gè)層級來進(jìn)行if判斷。
總之代碼寫起來都會(huì)比較啰嗦擦酌，
有時(shí)俱诸，寫代碼到hight處時(shí)，會(huì)忘記寫這些判斷赊舶；
所以睁搭，我想要不就寫個(gè)函數(shù)來專門檢查這種字段缺失導(dǎo)致的錯(cuò)誤吧。
結(jié)果發(fā)現(xiàn)笼平，當(dāng)發(fā)生這種 在多個(gè)json層級中丟失字段的情況 時(shí)园骆，
程序在檢查函數(shù)被調(diào)用起來前就出錯(cuò)了，
無法將res.data.userInfo.card.name作為一個(gè)參數(shù)傳到函數(shù)里寓调；
于是乎锌唾，
我就花了2秒鐘胡亂寫了一個(gè)方法，試圖找到一個(gè)簡便的處理方式夺英。
這個(gè)方法純屬狗皮膏藥式的晌涕，難免錯(cuò)漏滋捶，
貼出來僅供大家一樂，不要被我誤導(dǎo)~~
/**
* 返回一個(gè)json層級下的節(jié)點(diǎn)內(nèi)容
* root ： 要被讀取的json節(jié)點(diǎn)的root節(jié)點(diǎn)
* jsonStr ： 要被讀取的節(jié)點(diǎn)的字符串形式
* defaultValue : 如果要被讀取的節(jié)點(diǎn)不存在或?yàn)榭战ヅ牛瑒t返回該值
*
* // demo
* var jsonStr = '{"res":{"data":null}}';
* var jsonRoot = JSON.parse(jsonStr);
* var str = utils.jsonObj(jsonRoot,"res.data.userInfo.card.name",undefined);
*/
function jsonObj(root, jsonStr,defaultValue) {
if (!root) {
return defaultValue;
} else {
try {
var nodeNameArray = jsonStr.split('.');
var tmpRoot = root;
var i = 0;
for (var i = 0; i < nodeNameArray.length; i++) {
var tmpNodeName = nodeNameArray[i];
var tmpNode = tmpRoot[tmpNodeName];
if (tmpNode) {
console.log("." + tmpNodeName);
tmpRoot = tmpNode;
} else {
//發(fā)生異常了
console.log("解析失敗," + jsonStr + " 的值為：" + defaultValue);
return defaultValue;
}
}
//解析完成,tmpRoot即為所求
console.log(jsonStr + " 的值為："+tmpNode);
return tmpNode;
} catch (e) {
console.log("try catch." + e);
return defaultValue;
}
}
}
看到這里炬太，有人肯定會(huì)問：
這不是脫褲子放屁嗎？
前端該如何解析json驯耻，難道不是事先就和server端同學(xué)商定好了的嗎亲族？
服務(wù)端如果不按照事先的約定返回，那是服務(wù)端同學(xué)的問題翱筛俊霎迫？
讓服務(wù)端同學(xué)去改一下不就OK了？
的確帘靡，道理我都懂知给，就是過不好這一生。
當(dāng)有前端+后端配合開發(fā)的項(xiàng)目時(shí)描姚，很多錯(cuò)誤都是通過前端系統(tǒng)被暴露出來的涩赢，
特別是線上的項(xiàng)目，
有時(shí)候錯(cuò)誤是很靈異的轩勘，需要很多精力去排查筒扒，最后才能發(fā)現(xiàn)問題所在。
我認(rèn)為加一層處理的好處是：應(yīng)該可以提高排錯(cuò)的速度绊寻。
另外花墩，對于線上的系統(tǒng)，
多一層防護(hù)澄步，
無論對用戶體驗(yàn)還是對系統(tǒng)本身冰蘑，都會(huì)更好一些吧～
全劇終...
