JavaScript 錯誤處理的解決過程是怎樣的

本篇文章為大家展示了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 無關。

上述內容就是JavaScript 錯誤處理的解決過程是怎樣的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。