聊聊Javascript中try catch的2個(gè)作用
程序是從上到下順序執(zhí)行的,同時(shí)可以通過(guò)一些控制語(yǔ)句來(lái)改變執(zhí)行的路線(xiàn),受控制語(yǔ)句影響下,程序最終的執(zhí)行路線(xiàn)就是控制流。
js 里面的控制語(yǔ)句有 if、for、while、try catch 等,它們都會(huì)改變程序的走向。
程序是操作數(shù)據(jù)的,隨著程序的運(yùn)行,也就是控制流的前進(jìn)而改變的數(shù)據(jù)叫做數(shù)據(jù)流。
很明顯,數(shù)據(jù)流是依賴(lài)控制流的,程序分析里面的數(shù)據(jù)流分析也是要先做控制流分析。
比如這樣一段代碼:
const a = 1; let b; if (a === 1) { b = '1111'; } else { b = '2222'; }
因?yàn)?a 為 1,所以會(huì)執(zhí)行到 b = '1111';,這就是控制流,也就是程序最終執(zhí)行的代碼,可以用來(lái)分析程序的走向,做一些死代碼刪除之類(lèi)的優(yōu)化。
而隨著控制流的執(zhí)行,b 會(huì)被賦值為 2222,這就是數(shù)據(jù)流,也就是值的變化的過(guò)程,可以用來(lái)分析某個(gè)語(yǔ)句的變量的值。
程序是針對(duì)不同數(shù)據(jù)做不同的處理,如果數(shù)據(jù)有錯(cuò)誤,那么處理程序也就沒(méi)法處理了,就會(huì)報(bào)錯(cuò),會(huì)中斷后續(xù)的控制流。比如數(shù)據(jù)為空、數(shù)據(jù)格式不對(duì)等等。這時(shí)候就要通過(guò) try catch 做錯(cuò)誤處理,也叫異常處理。
我們做異常處理有兩個(gè)目的:
1、對(duì)出錯(cuò)的邏輯做一些兜底處理。
比如參數(shù)解析有錯(cuò)誤的時(shí)候,在 catch 里賦一個(gè)默認(rèn)值。這種錯(cuò)誤處理之后就沒(méi)必要再報(bào)出來(lái)了。這種情況下 try catch 也是作為邏輯的一部分,相當(dāng)于 if else。
2、對(duì)報(bào)的錯(cuò)做更場(chǎng)景化的描述。
JS 的報(bào)錯(cuò)是 JS 引擎拋出的,比如調(diào)用了一個(gè) null 對(duì)象的方法會(huì)報(bào) TypeError,使用了未聲明的變量會(huì)報(bào)
ReferenceError。而具體的 Error 是在不同場(chǎng)景下報(bào)出的,就有不同的含義:
如果這個(gè)對(duì)象是來(lái)自用戶(hù)輸入的,那就是用戶(hù)輸入的有錯(cuò)誤,如果這個(gè)對(duì)象是從服務(wù)端獲取的,那就意味著服務(wù)端返回的數(shù)據(jù)有錯(cuò)誤。在不同的場(chǎng)景下,同一個(gè) Error 會(huì)有更具體的含義,所以我們要做 try catch。然后拋出一個(gè)自定義的錯(cuò)誤,包含有場(chǎng)景信息的錯(cuò)誤描述。
這點(diǎn)很多庫(kù)和框架做的都比較好,報(bào)出的錯(cuò)都是有具體的場(chǎng)景信息,甚至還有解決方式,而且還有的通過(guò)錯(cuò)誤編號(hào)做了管理,可以通過(guò) errorno 來(lái)查詢(xún)解決方式。這種就是對(duì)錯(cuò)誤做了自定義的處理。
而很多業(yè)務(wù)代碼中報(bào)的錯(cuò)就并沒(méi)有做這種處理,是直接把原生 Error 給報(bào)出來(lái)了。我們會(huì)通過(guò)異常監(jiān)控平臺(tái)來(lái)收集一些 throw 到全局的錯(cuò)誤,而這些錯(cuò)誤往往都是比較原始的信息,雖然帶上了錯(cuò)誤位置和堆棧,但還要通過(guò)看源碼來(lái)定位問(wèn)題。
比如報(bào)了一個(gè)對(duì)象為空的錯(cuò)誤,但是我怎么知道這是什么對(duì)象為空,會(huì)是什么原因,怎么解決,有沒(méi)有編號(hào)。
如果我們能夠?qū)Ω鞣N錯(cuò)誤 catch 之后 throw 出一些具體場(chǎng)景的自定義錯(cuò)誤,那是不是就好的多了。這點(diǎn)第三方庫(kù)都做得很好,而業(yè)務(wù)代碼很少有人注重場(chǎng)景化的自定義錯(cuò)誤。
當(dāng)然,前端業(yè)務(wù)代碼的用戶(hù)是通過(guò)界面來(lái)使用該軟件的,其實(shí)只要對(duì)各種錯(cuò)誤做一些 UI 上的提示就可以。而庫(kù)的代碼是給開(kāi)發(fā)者用的,那么就要對(duì)各種錯(cuò)誤做場(chǎng)景化的描述,甚至給錯(cuò)誤編號(hào)并給出解決方案。
但我覺(jué)得業(yè)務(wù)代碼也應(yīng)該像第三方庫(kù)代碼那樣來(lái)對(duì)待錯(cuò)誤,不要把沒(méi)有啥意義的原生錯(cuò)誤報(bào)出來(lái),而是報(bào)一些有具體含義的自定義錯(cuò)誤,這樣排查和解決問(wèn)題就會(huì)簡(jiǎn)單很多。
不過(guò)雖然場(chǎng)景化的自定義錯(cuò)誤可以更好的幫助排查問(wèn)題,那也一定是建立在對(duì)該段代碼可能報(bào)的錯(cuò)誤有把握的情況下。要是自己報(bào)出的錯(cuò)誤信息和實(shí)際的錯(cuò)誤原因不一樣,反而會(huì)增加排查問(wèn)題的難度,還不如把原生錯(cuò)誤報(bào)出來(lái)。
總結(jié)
程序執(zhí)行的流程是控制流,受控制語(yǔ)句影響,執(zhí)行的過(guò)程中會(huì)改變數(shù)據(jù),數(shù)據(jù)的變化叫做數(shù)據(jù)流,控制流和數(shù)據(jù)流是程序分析里面經(jīng)常分析的兩個(gè)方面。
錯(cuò)誤會(huì)中斷控制流,我們要對(duì)錯(cuò)誤做一些處理,通過(guò) try catch。
錯(cuò)誤處理有兩個(gè)目的:
一個(gè)是做一些兜底的處理,相當(dāng)于 if else,不需要再把錯(cuò)誤報(bào)出來(lái)。
一個(gè)是做對(duì)原生的 JS 錯(cuò)誤做場(chǎng)景化的描述,創(chuàng)建一個(gè)有更具體信息的錯(cuò)誤對(duì)象拋出來(lái)。
這點(diǎn)很多庫(kù)做的很好,甚至還會(huì)給錯(cuò)誤編號(hào)并給出解決方式。但業(yè)務(wù)代碼其實(shí)很多只做了給用戶(hù)的 UI 上的反饋,沒(méi)有對(duì)拋出的錯(cuò)誤做場(chǎng)景化的包裝。這就導(dǎo)致了錯(cuò)誤監(jiān)控平臺(tái)收集到的錯(cuò)誤都是比較原始的錯(cuò)誤,需要查看源碼來(lái)排查。如果也能像庫(kù)的代碼那樣做一些場(chǎng)景化的錯(cuò)誤包裝,統(tǒng)計(jì)和排查起問(wèn)題來(lái)會(huì)容易很多,這點(diǎn)大多數(shù) Javascript 工程師都沒(méi)做到。
到此這篇關(guān)于Javascript中try catch作用的文章就介紹到這了,更多相關(guān)Javascript中try catch作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- js中的異常處理try...catch使用介紹
- javascript中 try catch用法
- JavaScript Try...Catch 聲明的 使用方法
- JS中用try catch對(duì)代碼運(yùn)行的性能影響分析
- 實(shí)例解析js中try、catch、finally的執(zhí)行規(guī)則
- javascript中的try catch異常捕獲機(jī)制用法分析
- 理解javascript中try...catch...finally
- JS異常處理try..catch語(yǔ)句的作用和實(shí)例
- 一分鐘學(xué)會(huì)JavaScript中的try-catch
- JS?try?catch用法舉例之異常處理
相關(guān)文章
如何用js判斷當(dāng)前是否是企業(yè)微信環(huán)境還是微信環(huán)境
這篇文章主要給大家介紹了關(guān)于如何用js判斷當(dāng)前是否是企業(yè)微信環(huán)境還是微信環(huán)境的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2024-04-04JavaScript/jQuery實(shí)現(xiàn)切換頁(yè)面效果
這篇文章主要為大家詳細(xì)介紹了JavaScript或jQuery實(shí)現(xiàn)切換頁(yè)面效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03工作中比較實(shí)用的JavaScript驗(yàn)證和數(shù)據(jù)處理的干貨(經(jīng)典)
工作中比較實(shí)用的JavaScript驗(yàn)證和數(shù)據(jù)處理知識(shí)經(jīng)常會(huì)用到,下面小編通過(guò)查閱相關(guān)資料及日常記錄的知識(shí)分享到腳本之家平臺(tái),供大家參考2016-08-08靜態(tài)頁(yè)面html中跳轉(zhuǎn)傳值的JS處理技巧
這篇文章主要介紹了靜態(tài)頁(yè)面html中跳轉(zhuǎn)傳值的JS處理技巧,結(jié)合實(shí)例形式分析了HTML頁(yè)面跳轉(zhuǎn)通過(guò)URL傳遞參數(shù)的方法與javascript處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06javascript中對(duì)變量類(lèi)型的判斷方法
在JavaScript中,有5種基本數(shù)據(jù)類(lèi)型和1種復(fù)雜數(shù)據(jù)類(lèi)型,基本數(shù)據(jù)類(lèi)型有:Undefined, Null, Boolean, Number和String;復(fù)雜數(shù)據(jù)類(lèi)型是Object,Object中還細(xì)分了很多具體的類(lèi)型,比如:Array, Function, Date等等2015-08-08從數(shù)據(jù)庫(kù)讀取數(shù)據(jù)后將其輸出成html標(biāo)簽的三種方法
需要輸出成html標(biāo)簽時(shí)編譯器卻自動(dòng)幫我們輸出成字符串,這該怎么辦?下面有個(gè)三個(gè)解決方法,一一測(cè)試便知其效果是如何2014-10-10通過(guò)網(wǎng)頁(yè)查看JS源碼中漢字顯示亂碼的解決方法
這篇文章給大家主要介紹了通過(guò)網(wǎng)頁(yè)查看JS源碼的時(shí)候,發(fā)現(xiàn)漢字顯示是亂碼的解決方法,文中通過(guò)圖文詳解的介紹了解決的步驟,詳細(xì)會(huì)對(duì)大家很有幫助,有需要的朋友們下面來(lái)一起看看吧。2016-10-10javascript高級(jí)學(xué)習(xí)筆記整理
打算做一個(gè)js面向?qū)ο蟮呢澇陨?但是最終是流產(chǎn)了,整理了下廢棄的代碼,回顧了下PPT.想學(xué)習(xí)js面向?qū)ο蟮呐笥岩部梢詤⒖枷隆?/div> 2011-08-08javascript 限制輸入和粘貼(IE,firefox測(cè)試通過(guò))
javascript 限制輸入和粘貼 IE和火狐2.x、火狐3.x下測(cè)試通過(guò)2008-11-11最新評(píng)論