關于 JavaScript 錯誤處理的最完整指南(上半部)
什么是編程中的錯誤
我們的開發過程中并不總是一帆風順。特別是在某些情況下，我們可能希望停止程序或在發生不良情況時通知用戶。
例如：
- 程序試圖打開一個不存在的文件、
- 網絡連接斷開
- 用戶輸入了無效字符
在類似這些情況下，我們可以自己寫個自定義的錯誤來管理，或者直接讓引擎為我們去定義這些錯誤。有了錯誤定義后，我們可以用消息通知用戶，或者停止執行程序的運行。
JavaScript 中的錯誤是什么
JavaScript中的錯誤是一個對象。要在 JS 創建一個錯誤，可以使用 Error 對象，如下所示：
- const err = new Error('霍霍，好像哪里出問題了！')
也可以省略new關鍵字：
- const err = Error('霍霍，好像哪里出問題了！')
創建，錯誤對象有三個屬性：
- message:帶有錯誤消息的字符串
- name：錯誤的類型
- stack：函數執行的堆棧跟蹤
例如，我們使用 TypeError 對象創建一個錯誤，對應的 message 是創建的傳入的字符號，name 是 "TypeError"
- const wrongType = TypeError("霍霍，好像哪里出問題了！")
- wrongType.message // "霍霍，好像哪里出問題了！"
- wrongType.name // "TypeError"
JavaScript中的許多類型的錯誤
JavaScript 中有很多類型的錯誤 ,如：
- Error
- EvalError
- InternalError
- RangeError
- ReferenceError
- SyntaxError
- TypeError
- URIError
記住，所有這些錯誤類型都是實際的構造函數，意味著返回一個新的錯誤對象。
在我們的代碼中，主要還是使用Error和TypeError這兩種最常見的類型來創建自己的錯誤對象 。
大多數時候，大多數錯誤將直接來自JavaScript引擎，例如InternalError或SyntaxError。
如果你重新賦值給 const 聲明的變量時，就會引發 TypeError 錯誤。
- const name = "前端小智"
- name = "王大冶"
- // // TypeError: Assignment to constant variable.
SyntaxError 錯誤一般是關鍵字打錯了，如下所示：
- va x = '33';
- // SyntaxError: Unexpected identifier
或者，當在錯誤的地方使關鍵字時，例如await 和 async 的使用：
- function wrong(){
- await 99;
- }wrong();// SyntaxError: await is only valid in async function
另一個TypeError的例子是，在頁面操作不存在的 DOM 元素。
- Uncaught TypeError: button is null
除了這些內置錯誤外，在瀏覽器中還有：
- DOMException
- DOMError，現在已經廢棄，不再使用了。
DOMException是與 Web API 相關的一系列錯誤。當我們在瀏覽器中執行愚蠢的操作時，它們會被拋出，例如：
- document.body.appendChild(document.cloneNode(true));
結果：
- Uncaught DOMException: Node.appendChild: May not add a Document as a child
什么是異常?
大多數開發人員認為錯誤和異常是一回事。實際上，錯誤對象只有在拋出時才會變成異常。
要在JavaScript中引發異常，我們使用throw 關鍵字把錯誤拋出去：
- const wrongType = TypeError("霍霍，好像哪里出問題了！")
- throw wrongType;
簡寫形式：
- throw TypeError("霍霍，好像哪里出問題了！")
或者
- throw new TypeError("霍霍，好像哪里出問題了！")
在函數體或者條件之外拋出異步的可能性不大，考慮下面的例子：
- function toUppercase(string) {
- if (typeof string !== "string") {
- throw TypeError("霍霍，好像哪里出問題了！");
- } return string.toUpperCase();
- }
這里我們檢查函數參數是否為字符串。如果不是，我們拋出一個異常。從技術上講，JavaScript中可以拋出任何東西，而不僅僅是錯誤對象
- throw Symbol();
- throw 33;
- throw "Error!";
- throw null;
但是，最好避免這些事情：始終拋出正確的錯誤對象，而不是一些基本類型。
這樣有助于在代碼中，錯誤處理的一致性。其他成員可以期望在錯誤對象上訪問error.message或error.stack 來知道錯誤的源頭。
當我們拋出異常時會發生什么?
異常就像一個上升的電梯:一旦你拋出一個，它就會在程序堆棧中冒泡，除非它在某個地方被捕獲。
考慮以下代碼：
- function toUppercase(string) {
- if (typeof string !== "string") {
- throw TypeError("參數類型需要是 string 的");
- } return string.toUpperCase();
- }toUppercase(4);
運行代碼會在控制臺看到：
- Uncaught TypeError: Wrong type given, expected a string
- toUppercase http://localhost:5000/index.js:3
- <anonymous> http://localhost:5000/index.js:9
可以看到發生錯誤的確切行。
這個報告是一個堆棧跟蹤，它有助于跟蹤代碼中的問題。堆棧跟蹤從下至上：
- toUppercase http://localhost:5000/index.js:3
- <anonymous> http://localhost:5000/index.js:9
除了在瀏覽器的控制臺中看到此堆棧跟蹤外，還可以通過錯誤對象的stack屬性進行查看。
如果異常未被捕獲，也就是說，程序員不采取任何措施來捕獲它，程序將崩潰。
何時何地捕獲代碼中的異常取決于特定的用例。
例如，我們可能想在堆棧中傳遞一個異常，以使程序完全崩潰。這種情況發生在， 讓錯誤停止程序比處理無效數據來得更安全。
接下來，我們來看看 JavaScript 同步和異步中的錯誤和異常處理。
同步中的錯誤處理
同步代碼在大多數情況下都很簡單，因此它的錯誤處理也很簡單。
常規函數的錯誤處理
同步代碼的執行順序與寫入順序相同。我們再看一下前面的例子：
- function toUppercase(string) {
- if (typeof string !== "string") {
- throw TypeError("參數類型需要是 string 的");
- } return string.toUpperCase();
- }toUppercase(4);
在這里，引擎調用并執行toUppercase。所有這些都是同步發生的。要捕獲同步函數引發的異常，我們可以使用try/catch/finally：
- try {
- toUppercase(4);
- } catch (error) {
- console.error(error.message);
- } finally {
- }
try/catch/finally是一個同步結構，但它也可以捕獲異步出現的異常。
使用 generator 函數來處理錯誤
JavaScript中的生成器函數是一種特殊的函數。除了在其內部作用域和使用者之間提供雙向通信通道之外，還可以隨意暫停和恢復。
要創建一個生成器函數，我們在function關鍵字后面放一個*：
- function* generate() {
- //
- }
在函數內可以使用yield返回值：
- function* generate() {
- yield 33;
- yield 99;
- }
生成器函數的返回值是一個迭代器對象(iterator object)。要從生成器中提取值，我們可以使用兩種方法：
- 使用 next() 方法
- 通過 for...of 遍歷
如下所示，要想在生成器中獲取值，我們可以這樣做：
- function* generate() {
- yield 33;
- yield 99;
- }const go = generate();
- const firstStep = go.next().value; // 33
- const secondStep = go.next().value; // 99
成器也可以采用其他方法工作：它們可以接收調用者返回的值和異常。
除了next()之外，從生成器返回的迭代器對象還具有throw()方法。使用這種方法，我們可以通過向生成器中注入一個異常來停止程序：
- function* generate() {
- yield 33;
- yield 99;
- }const go = generate();
- const firstStep = go.next().value; // 33
- go.throw(Error("我要結束你!"));
- const secondStep = go.next().value; // 這里會拋出異常
要獲取此錯誤，可以在生成器函數中使用 try/catch/finally：
- function* generate() {
- try {
- yield 33;
- yield 99;
- } catch (error) {
- console.error(error.message);
- }}
下面這個事例是使用 for...of 來獲取 生成器函數中的值：
- function* generate() {
- yield 33;
- yield 99;
- throw Error("我要結束你!")
- }try {
- for (const value of generate()) {
- console.log(value)
- }} catch (error) {
- console.log(error.message)
- }/* 輸出：
- 33
- 99
- 我要結束你!
- */
異步中的錯誤處理
JavaScript本質上是同步的，是一種單線程語言。
諸如瀏覽器引擎之類的宿主環境使用許多Web API， 增強了 JS 以與外部系統進行交互并處理與 I/O 綁定的操作。
瀏覽器中異步操作有：定時器相關的函數、事件和 Promise。
異步中的錯誤處理不同于同步的錯誤處理。我們來看一些例子。
定時器的錯誤處理
考慮下面的代碼片段：
- function failAfterOneSecond() {
- setTimeout(() => {
- throw Error("Something went wrong!");
- }, 1000);
- }
這個函數大約在1秒后拋出異常，處理這個異常的正確方法是什么?
下面的方法不起作用：
- function failAfterOneSecond() {
- setTimeout(() => {
- throw Error("Something went wrong!");
- }, 1000);
- }try {
- failAfterOneSecond();} catch (error) {
- console.error(error.message);
- }
我們知道 try/catch 是同步，而 setTimeout 是異步的。當執行到 setTimeout回調時，try/catch 早已跑完了，所以異常就無法捕獲到。
它們在兩務不同的軌道上：
- Track A: --> try/catch
- Track B: --> setTimeout --> callback --> throw
如果能讓程序跑下去，把 try/catch 移動到 setTimeout 里面。但這種做法意義不大，后面我們會使用 Promise 來解決這類的問題。
事件中錯誤處理
DOM 的事件操作(監聽和觸發)，都定義在EventTarget接口。Element節點、document節點和window對象，都部署了這個接口。此外，XMLHttpRequest、AudioNode、AudioContext等瀏覽器內置對象，也部署了這個接口。該接口就是三個方法，addEventListener和removeEventListener用于綁定和移除監聽函數，dispatchEvent用于觸發事件。
DOM 事件的錯誤處理機制遵循任何異步Web API的相同方案。
考慮下面示例：
- const button = document.querySelector("button");
- button.addEventListener("click", function() {
- throw Error("Can't touch this button!");
- });
在這里，單擊按鈕后立即引發異常。我們如何抓住它?下面這種方式沒啥作用，也不會阻止程序崩潰：
- const button = document.querySelector("button");
- try {
- button.addEventListener("click", function() {
- throw Error("Can't touch this button!");
- });} catch (error) {
- console.error(error.message);
- }
與 setTimeout 一樣，addEventListener 也是異步執行的。
- Track A: --> try/catch
- Track B: --> addEventListener --> callback --> throw
如果能讓程序跑下去，把 try/catch 移動到 addEventListener 里面。但這種做法意義不大，后面我們會使用 Promise 來解決這類的問題。
onerror 怎么樣
HTML元素具有許多事件處理程序，例如onclick，onmouseenter，onchange等，當然還有 onerror。
當 img 標簽或 script 標簽遇到不存在的資源時，onerror事件處理程序都會觸發。
考慮下面示例：
- ...
- <body>
- <img src="nowhere-to-be-found.png" alt="So empty!">
- </body>
- ...
當文件不存在時，控制臺就會報如下的錯誤：
- GET http://localhost:5000/nowhere-to-be-found.png
- [HTTP/1.1 404 Not Found 3ms]
在 JS 中，我們可以通過 onerror 來捕獲這個錯誤：
- const image = document.querySelector("img");
- image.onerror = function(event) {
- console.log(event);
- };
更好的方式：
- const image = document.querySelector("img");
- image.addEventListener("error", function(event) {
- console.log(event);
- });
這種方式對于一些請求資源丟失的情況很有用，但 onerror 與 throw 與 try/cathc 無關。
本文轉載自微信公眾號「 大遷世界」，可以通過以下二維碼關注。轉載本文請聯系****公眾號。
