本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)。

事情的發(fā)展并非總是如愿以償。當(dāng)出問題時(shí)，我們會(huì)經(jīng)由錯(cuò)誤得到提示。任何一位開發(fā)者都應(yīng)該對(duì)錯(cuò)誤的概念了如指掌，前端開發(fā)者一定熟知網(wǎng)絡(luò)應(yīng)用程序運(yùn)行時(shí)瀏覽器控制臺(tái)中通知錯(cuò)誤的紅色文本警示。

錯(cuò)誤術(shù)語和異常處理機(jī)制術(shù)語在編程中的應(yīng)用屢見不鮮，但它們往往交替使用。筆者認(rèn)為，錯(cuò)誤由JavaScript引擎拋出，異常處理機(jī)制則由開發(fā)者拋出。但這種情況在Java編程語言中也許不會(huì)出現(xiàn)，在Java中，錯(cuò)誤屬于未檢驗(yàn)類型，在運(yùn)行時(shí)出現(xiàn)；而異常處理機(jī)制可在運(yùn)行時(shí)或編譯時(shí)出現(xiàn)。

[[376000]]

JavaScript中的錯(cuò)誤類型

作為動(dòng)態(tài)類型語言，JavaScript在運(yùn)行前不會(huì)警示類型錯(cuò)誤。錯(cuò)誤雖然通常歸屬于JavaScript中的Error對(duì)象，但是錯(cuò)誤可進(jìn)一步分類。這些分支繼承了Error對(duì)象的特點(diǎn)。

• EvalError：表示使用全局函數(shù)eval()時(shí)拋出的錯(cuò)誤。
• InternalError：表示因內(nèi)部錯(cuò)誤而被JavaScript引擎拋出的錯(cuò)誤。一個(gè)典型的例子：“遞歸方法過多”或一些東西過大的情形。
• RangeError：表示數(shù)值超出范圍時(shí)拋出的錯(cuò)誤。
• ReferenceError：表示引用的變量無法取消時(shí)拋出的錯(cuò)誤。換句話說，引用的變量無法找到或無法訪問。
• SyntaxError：表示因輸入了無效的句法，JavaScript引擎無法解釋給定的代碼而拋出的錯(cuò)誤。新手們常常遇到此類錯(cuò)誤。
• Type Error：通常表示因在操作中使用了無效的數(shù)據(jù)類型，致使操作指令無法執(zhí)行而拋出的錯(cuò)誤。
• URIError：表示函數(shù)encodeURI()或decodeURI()接收了無效的參數(shù)而拋出的錯(cuò)誤。

什么是錯(cuò)誤處理?

程序通常包括兩類主要問題，程序員錯(cuò)誤和精度問題。程序員錯(cuò)誤指的是程序員在寫代碼時(shí)做了蠢事，比如說忘記使用正確的變量。精度問題是客觀因素引發(fā)的問題，比如說因網(wǎng)速慢導(dǎo)致數(shù)據(jù)庫連接失敗。

第一類問題可以通過查找并修復(fù)得到處理，但第二類問題只能通過預(yù)防性措施或積極主動(dòng)的措施得到修復(fù)。這意味著在寫代碼時(shí)要考慮到最壞的可能性并將它們妥善處理。這可以是在任何性質(zhì)的錯(cuò)誤發(fā)生時(shí)執(zhí)行的常規(guī)操作，也可以是針對(duì)特定錯(cuò)誤類型執(zhí)行的特定操作。這種防御性措施被稱為錯(cuò)誤處理。

為何首先處理錯(cuò)誤?

為了了解為何錯(cuò)誤處理至關(guān)重要，我們來設(shè)想如下情境：若未能妥善處理錯(cuò)誤，將會(huì)發(fā)生什么?設(shè)想已布置網(wǎng)絡(luò)的應(yīng)用程序未安置錯(cuò)誤處理。有許多錯(cuò)誤的出現(xiàn)在開發(fā)者預(yù)期之外，以用戶嘗試上傳格式錯(cuò)誤的文件為例，如果這種情況未經(jīng)提前處理：

• 文件上傳失敗
• 用戶無從得知為何會(huì)失敗(除非他們能打開瀏覽器控制臺(tái)一探究竟)
• 用戶很可能今后因?yàn)樯鲜鰡栴}不會(huì)訪問網(wǎng)站
• 作為一名開發(fā)者無從得知為何在這種特殊情況下程序會(huì)停止運(yùn)行

如果采用合適的錯(cuò)誤處理方法，上述諸多問題就不會(huì)產(chǎn)生。“合適的”指的是錯(cuò)誤產(chǎn)生時(shí)的適當(dāng)處理方法。程序員處理了錯(cuò)誤，但并未“合適地”處理錯(cuò)誤，這是網(wǎng)絡(luò)應(yīng)用程序的現(xiàn)存問題之一。

每當(dāng)錯(cuò)誤產(chǎn)生，許多網(wǎng)站通常會(huì)顯示錯(cuò)誤信息。這理應(yīng)為最終的處理方法，但是大多數(shù)缺少經(jīng)驗(yàn)的開發(fā)者會(huì)首先采用這種方法。理想的處理方法是用合適的處理方法處理每一處錯(cuò)誤，而非治標(biāo)不治本。在實(shí)際的情境中，可能不會(huì)在特定的用戶體驗(yàn)中考慮到所有可能的情境。

但是有時(shí)，告知用戶特別的錯(cuò)誤也許不是個(gè)好主意，因?yàn)檫@對(duì)于普通用戶來說過于復(fù)雜。在這些情況下，可以將一個(gè)錯(cuò)誤的代碼提供給用戶，他們會(huì)將代碼發(fā)送給客戶服務(wù)團(tuán)隊(duì)，這個(gè)團(tuán)隊(duì)能夠參照錯(cuò)誤代碼指導(dǎo)相應(yīng)的用戶。

錯(cuò)誤處理對(duì)錯(cuò)誤記錄來說至關(guān)重要，因?yàn)槿绻皇紫忍幚礤e(cuò)誤，就無法記錄錯(cuò)誤。筆者認(rèn)為，每一位開發(fā)者都需要精通錯(cuò)誤記錄。

錯(cuò)誤處理的方法

下文列舉了JavaScript中的錯(cuò)誤處理方法。一些是同步的，另一些是異步的。

(1) try-catch

try-catch方法運(yùn)行代碼塊語句并“捕獲”代碼塊拋出的任何錯(cuò)誤。如果在代碼語句運(yùn)行過程中發(fā)生錯(cuò)誤，代碼執(zhí)行流將停止并移動(dòng)至catch代碼塊中的語句，從而能夠適當(dāng)?shù)靥幚磉@些錯(cuò)誤。try-catch代碼塊可用于處理同步和異步代碼。

try { 
   
  console.log(unknownVariable); 
   
} catch (error) { 
   
  console.log(error); 
  //ReferenceError: unknownVariable isnot defined 
   
} 

(2) Promise catch

引入Promises令JavaScript煥然一新。當(dāng)Promise拋出錯(cuò)誤時(shí)，我們可以使用catch方法來處理該錯(cuò)誤。這與try-catch方法相似，但是該方法中沒有try代碼塊。

(3) Callback error

在傳統(tǒng)Node APIs中，callback用于處理響應(yīng)和錯(cuò)誤。通常，callback的模式是callback(err,res)，其中僅“err”或“res”是非空值。

如上方所示，如果異步函數(shù)失敗，err參數(shù)將接收一個(gè)錯(cuò)誤，這個(gè)錯(cuò)誤應(yīng)適當(dāng)處理。

(4) Error event

這是NodeJS中常見的事件處理模式，在錯(cuò)誤產(chǎn)生的情況下會(huì)觸發(fā)一個(gè)error事件。

由于80端口是HTTP的默認(rèn)端口，上面的代碼片段無法創(chuàng)建服務(wù)器，因此會(huì)拋出一個(gè)錯(cuò)誤。

(5) Onerror

HTML元素包含一些事件，例如onclick, onchange等。當(dāng)DOM元素拋出錯(cuò)誤時(shí)，將觸發(fā)onerror事件。此外，每當(dāng)JavaScript發(fā)生運(yùn)行錯(cuò)誤，window對(duì)象將觸發(fā)onerror事件。

window.onerror = function(message, source, lineno, colno, error) { 
  //handle error 
};element.error = function(event) { 
  //handle element error 
) 

錯(cuò)誤邊界 — React

React中的錯(cuò)誤邊界允許JavaScript的錯(cuò)誤在直觀視圖結(jié)構(gòu)中得到處理，而不會(huì)向用戶顯示損壞的UI。只需定義一個(gè)名為componentDidCatch(error,info)的全新生命周期方法，就可以創(chuàng)建這些React組件。

錯(cuò)誤處理是編程的重要一環(huán)，要想構(gòu)建高效的應(yīng)用程序，你需要認(rèn)真對(duì)待它。