什么是編程中的錯誤

我們的開發過程中并不總是一帆風順。特別是在某些情況下，我們可能希望停止程序或在發生不良情況時通知用戶。

[[341895]]

例如：

• 程序試圖打開一個不存在的文件、
• 網絡連接斷開
• 用戶輸入了無效字符

在類似這些情況下，我們可以自己寫個自定義的錯誤來管理，或者直接讓引擎為我們去定義這些錯誤。有了錯誤定義后，我們可以用消息通知用戶，或者停止執行程序的運行。

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 無關。

本文轉載自微信公眾號「 大遷世界」，可以通過以下二維碼關注。轉載本文請聯系****公眾號。