首頁 web前端 js教程 JavaScript中出現的錯誤處理方式

JavaScript中出現的錯誤處理方式

Jan 26, 2018 am 10:15 AM
javascript js 方式

JavaScript的事件驅動範式增添了豐富的語言,也是讓使用JavaScript程式設計變得更加多元。如果將瀏覽器設想為JavaScript的事件驅動工具,那麼當錯誤發生時,某個事件就會被拋出。理論上可以認為這些發生的錯誤只是JavaScript中的簡單事件。

本文將會討論客戶端JavaScript中的錯誤處理。主要介紹JavaScript中的易犯錯、錯誤處理、非同步程式碼編寫等內容。

下面就讓我們一起看看如何正確處理JavaScript中的錯誤。

Demo示範

本文中使用的demo可以在GitHub上找到,運行之後會是這樣的頁面:

##每個按鈕都會引發一個“錯誤(Exception)”,同時這個錯誤會模擬出一個被拋出的異常TypeError。下面是模組的定義:

// scripts/error.js
function error() {
 var foo = {};
 return foo.bar();
}
登入後複製
首先,這個函數宣告了一個空物件foo。需要注意的是,bar( )未在任何地方定義。接下來驗證這個單元測試是否會引發「錯誤」:

// tests/scripts/errorTest.js
it('throws a TypeError', function () {
 should.throws(error, TypeError);
});
登入後複製
這個單元測試在Mocha中,同時在 Should.js中有測試宣告。 Mocha是測試運行工具,而Should.js是斷言函式庫。這個單元測試運行在Node上,不需要使用瀏覽器。

error( )定義一個空對象,然後嘗試存取一個方法。因為bar( )在物件內不存在,所以就會引發異常。這種發生在像JavaScript這樣的動態語言上的錯誤,每個人可能都會遇到!

錯誤處理(一)

透過以下程式碼,對上述錯誤進行處理:

// scripts/badHandler.js
function badHandler(fn) {
 try {
  return fn();
 } catch (e) { }
 return null;
}
登入後複製
該處理程序將fn作為輸入參數,然後fn在處理函數內部會被調用。單元測試會顯示出上述錯誤處理程序的作用:

// tests/scripts/badHandlerTest.js
it('returns a value without errors', function() {
 var fn = function() {
  return 1;
 };
 var result = badHandler(fn);
 result.should.equal(1);
});

it('returns a null with errors', function() {
 var fn = function() {
  throw new Error('random error');
 };
 var result = badHandler(fn);
 should(result).equal(null);
});
登入後複製
如果出現問題,錯誤處理程序就會傳回null。 fn( )回呼函數可以指向一個合法的方法或錯誤。

以下的點擊事件會繼續進行事件處理:

// scripts/badHandlerDom.js
(function (handler, bomb) {
 var badButton = document.getElementById('bad');
 if (badButton) {
  badButton.addEventListener('click', function () {
   handler(bomb);
   console.log('Imagine, getting promoted for hiding mistakes');
  });
 }
}(badHandler, error));
登入後複製
這種處理方式在程式碼中隱藏了一個錯誤,並且很難發現。隱藏的錯誤可能會花費好幾個小時的調試時間。尤其是在具有深度呼叫堆疊的多層解決方案中,這個錯誤會更難發現。所以這是一種很差的錯誤處理方式。

錯誤處理(二)

下面是另一個錯誤處理方式。

// scripts/uglyHandler.js
function uglyHandler(fn) {
 try {
  return fn();
 } catch (e) {
  throw new Error('a new error');
 }
}
登入後複製
處理例外狀況的方式如下所示:

// tests/scripts/uglyHandlerTest.js
it('returns a new error with errors', function () {
 var fn = function () {
  throw new TypeError('type error');
 };
 should.throws(function () {
  uglyHandler(fn);
 }, Error);
});
登入後複製
以上對錯誤的處理程序有明顯的改進。在這裡異常會呼叫堆疊進行冒泡。同時錯誤會展開堆疊,這對偵錯非常有幫助。除了拋出異常,解釋器還會沿著堆疊尋找另外的處理。這也帶來了可以從堆疊頂部處理錯誤的可能。但這還是一種較差的錯誤處理,需要我們從堆疊中一步步追溯原始的異常。

可以採用一種替代方案,用自訂的錯誤方式來結束這種較差的錯誤處理。當你在錯誤中添加更多詳細資訊時,會讓這種方法變得很有幫助。

例如:

// scripts/specifiedError.js
// Create a custom error
var SpecifiedError = function SpecifiedError(message) {
 this.name = 'SpecifiedError';
 this.message = message || '';
 this.stack = (new Error()).stack;
};
SpecifiedError.prototype = new Error();
SpecifiedError.prototype.constructor = SpecifiedError;
// scripts/uglyHandlerImproved.js
function uglyHandlerImproved(fn) {
 try {
  return fn();
 } catch (e) {
  throw new SpecifiedError(e.message);
 }
}
// tests/scripts/uglyHandlerImprovedTest.js
it('returns a specified error with errors', function () {
 var fn = function () {
  throw new TypeError('type error');
 };
 should.throws(function () {
  uglyHandlerImproved(fn);
 }, SpecifiedError);
});
登入後複製
指定的錯誤會新增更多詳細資訊並保留原始的錯誤訊息。有了這個改進,以上的處理不再是較差的處理方式了,而是一個清晰有用的方式。

經過了上面的處理,我們也收到了一個未處理的例外。接下來讓我們來看看瀏覽器在處理錯誤時,有什麼幫助。

展開堆疊

處理例外狀況的一種方式是在呼叫堆疊的頂端加入try...catch。

比如說:

function main(bomb) {
 try {
  bomb();
 } catch (e) {
  // Handle all the error things
 }
}
登入後複製
但是,瀏覽器是事件驅動的, JavaScript中的異常也是一個事件。發生異常時,解釋器會暫停執行並展開:

// scripts/errorHandlerDom.js
window.addEventListener('error', function (e) {
 var error = e.error;
 console.log(error);
});
登入後複製
此事件處理程序會擷取任何執行上下文中發生的錯誤。各個目標發生的錯誤事件會觸發各種類型的錯誤。這種集中在程式碼中的錯誤處理是非常激進的。你可以使用菊花鏈處理方式來處理特定的錯誤。如果你遵循SOLID原則,就可以採用單一目的錯誤處理方式。這些處理程序可以隨時進行註冊,解釋器會循環執行需要執行的處理程序。程式碼庫可以從try...catch區塊中釋放出來,這也使得調試變得容易。在JavaScript中,把錯誤處理當作事件處理很重要。

捕獲堆疊

在解決問題時,呼叫堆疊會非常有用,同時瀏覽器剛好可以提供這些資訊。雖然堆疊屬性不是標準的一部分,但是最新的瀏覽器已經可以查看這些資訊了。

下面是在伺服器上記錄錯誤的範例:

// scripts/errorAjaxHandlerDom.js
window.addEventListener('error', function (e) {
 var stack = e.error.stack;
 var message = e.error.toString();
 if (stack) {
  message += '\n' + stack;
 }
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/log', true);
 // Fire an Ajax request with error details
 xhr.send(message);
});
登入後複製
每個錯誤處理都具有單一目的,這樣可以保持程式碼的DRY原則(目的單一,不要重複自己原則)。

在瀏覽器中,需要將事件處理新增到DOM。這意味著如果你正在建立第三方函式庫,那麼你的事件就會與客戶端程式碼共存。 window.addEventListener( )會幫你處理,同時也不會抹去現有的事件。

這是伺服器上日誌的截圖:

可以通过命令提示符查看日志,但是Windows上,日志是非动态的。

通过日志可以清楚的看到,具体什么情况触发了什么错误。在调试时调用堆栈也会非常有用,所以不要低估调用堆栈的作用。

在JavaScript中,错误信息仅适用于单个域。因为在使用来自不用域的脚本时,将会看不到任何错误详细信息。

一种解决方案是重新抛出错误,同时保留错误消息:

一旦重新启动了错误备

try {
 return fn();
} catch (e) {
 throw new Error(e.message);
}
登入後複製

份,全局错误处理程序就会完成其余的工作。确保你的错误处理处在相同域中,这样会保留原始消息,堆栈和自定义错误对象。

异步处理

JavaScript在运行异步代码时,进行下面的异常处理,会产生一个问题:

// scripts/asyncHandler.js
function asyncHandler(fn) {
 try {
  // This rips the potential bomb from the current context
  setTimeout(function () {
   fn();
  }, 1);
 } catch (e) { }
}
登入後複製

通过单元测试来查看问题:

// tests/scripts/asyncHandlerTest.js
it('does not catch exceptions with errors', function () {
 // The bomb
 var fn = function () {
  throw new TypeError('type error');
 };
 // Check that the exception is not caught
 should.doesNotThrow(function () {
  asyncHandler(fn);
 });
});
登入後複製

这个异常没有被捕获,我们通过单元测试来验证。尽管代码包含了try...catch,但是try...catch语句只能在单个执行上下文中工作。当异常被抛出时,解释器已经脱离了try...catch,所以异常未被处理。Ajax调用也会发生同样的情况。

所以,一种解决方案是在异步回调中捕获异常:

setTimeout(function () {
 try {
  fn();
 } catch (e) {
  // Handle this async error
 }
}, 1);
登入後複製

这种做法会比较奏效,但仍有很大的改进空间。

首先,这些try...catch block在整个区域纠缠不清。事实上,V8浏览器引擎不鼓励在函数内使用try ... catch block。V8是Chrome浏览器和Node中使用的JavaScript引擎。一种做法是将try...catch block移动到调用堆栈的顶部,但这却不适用于异步代码编程。

由于全局错误处理可以在任何上下文中执行,所以如果为错误处理添加一个窗口对象,那么就能保证代码的DRY和SOLID原则。同时全局错误处理也能保证你的异步代码很干净。

以下是该异常处理在服务器上的报告内容。请注意,输出内容会根据浏览器的不同而不同。

从错误处理中可以看到,错误来自于异步代码的setTimeout( )功能。

结论

在进行错误处理时,不要隐藏问题,而应该及时发现问题,并采用各种方法追溯问题的根源以便解决问题。虽然编写代码时,时常难免会埋下错误,但是我们也无须为错误的发生过于感到羞愧,及时解决发现问题从而避免更大的问题发生,正是我们现在需要做的。

相关推荐:

jQuery出错与解决方法小结

以上是JavaScript中出現的錯誤處理方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟,需要具體程式碼範例隨著網路和科技的快速發展,股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環,其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息,幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展,股票投資已經成為了越來越多人的選擇。而在股票交易中,蠟燭圖是常用的技術分析方法,它能夠顯示股票價格的變動趨勢,幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧,帶領讀者了解如何繪製股票蠟燭圖,並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前,我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

See all articles