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

本篇文章為大家展示了JavaScript 錯誤處理的解決過程是怎樣的，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

10年的興城網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整興城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“興城網(wǎng)站設(shè)計”,“興城網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

什么是編程中的錯誤

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

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

JavaScript 中的錯誤是什么

JavaScript中的錯誤是一個對象。要在 JS 創(chuàng)建一個錯誤，可以使用 Error 對象，如下所示：

const err = new Error('霍霍，好像哪里出問題了！')

也可以省略new關(guān)鍵字：

const err = Error('霍霍，好像哪里出問題了！')

創(chuàng)建，錯誤對象有三個屬性：

• message:帶有錯誤消息的字符串

• name：錯誤的類型

• stack：函數(shù)執(zhí)行的堆棧跟蹤

例如，我們使用 TypeError 對象創(chuàng)建一個錯誤，對應(yīng)的 message 是創(chuàng)建的傳入的字符號，name 是 "TypeError"

const wrongType = TypeError("霍霍，好像哪里出問題了！") wrongType.message // "霍霍，好像哪里出問題了！" wrongType.name // "TypeError"

JavaScript中的許多類型的錯誤

JavaScript 中有很多類型的錯誤 ,如：

• Error

• EvalError

• InternalError

• RangeError

• ReferenceError

• SyntaxError

• TypeError

• URIError

記住，所有這些錯誤類型都是實際的構(gòu)造函數(shù)，意味著返回一個新的錯誤對象。

在我們的代碼中，主要還是使用Error和TypeError這兩種最常見的類型來創(chuàng)建自己的錯誤對象 。

大多數(shù)時候，大多數(shù)錯誤將直接來自JavaScript引擎，例如InternalError或SyntaxError。

如果你重新賦值給 const 聲明的變量時，就會引發(fā) TypeError 錯誤。

const name = "前端小智" name = "王大冶" // // TypeError: Assignment to constant variable.

SyntaxError 錯誤一般是關(guān)鍵字打錯了，如下所示：

va x = '33'; // SyntaxError: Unexpected identifier

或者，當(dāng)在錯誤的地方使關(guān)鍵字時，例如await 和 async 的使用：

function wrong(){     await 99; }wrong();// SyntaxError: await is only valid in async function

另一個TypeError的例子是，在頁面操作不存在的 DOM 元素。

Uncaught TypeError: button is null

除了這些內(nèi)置錯誤外，在瀏覽器中還有：

• DOMException

• DOMError，現(xiàn)在已經(jīng)廢棄，不再使用了。

DOMException是與 Web API 相關(guān)的一系列錯誤。當(dāng)我們在瀏覽器中執(zhí)行愚蠢的操作時，它們會被拋出，例如：

document.body.appendChild(document.cloneNode(true));

結(jié)果：

Uncaught DOMException: Node.appendChild: May not add a Document as a child

什么是異常?

大多數(shù)開發(fā)人員認(rèn)為錯誤和異常是一回事。實際上，錯誤對象只有在拋出時才會變成異常。

要在JavaScript中引發(fā)異常，我們使用throw 關(guān)鍵字把錯誤拋出去：

const wrongType = TypeError("霍霍，好像哪里出問題了！") throw wrongType;

簡寫形式：

throw TypeError("霍霍，好像哪里出問題了！")

或者

throw new TypeError("霍霍，好像哪里出問題了！")

在函數(shù)體或者條件之外拋出異步的可能性不大，考慮下面的例子：

function toUppercase(string) {   if (typeof string !== "string") {     throw TypeError("霍霍，好像哪里出問題了！");   }  return string.toUpperCase(); }

這里我們檢查函數(shù)參數(shù)是否為字符串。如果不是，我們拋出一個異常。從技術(shù)上講，JavaScript中可以拋出任何東西，而不僅僅是錯誤對象

throw Symbol(); throw 33; throw "Error!"; throw null;

但是，最好避免這些事情：始終拋出正確的錯誤對象，而不是一些基本類型。

這樣有助于在代碼中，錯誤處理的一致性。其他成員可以期望在錯誤對象上訪問error.message或error.stack 來知道錯誤的源頭。

當(dāng)我們拋出異常時會發(fā)生什么?

異常就像一個上升的電梯:一旦你拋出一個，它就會在程序堆棧中冒泡，除非它在某個地方被捕獲。

考慮以下代碼：

function toUppercase(string) {   if (typeof string !== "string") {     throw TypeError("參數(shù)類型需要是 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

可以看到發(fā)生錯誤的確切行。

這個報告是一個堆棧跟蹤，它有助于跟蹤代碼中的問題。堆棧跟蹤從下至上：

toUppercase http://localhost:5000/index.js:3    <anonymous> http://localhost:5000/index.js:9

除了在瀏覽器的控制臺中看到此堆棧跟蹤外，還可以通過錯誤對象的stack屬性進(jìn)行查看。

如果異常未被捕獲，也就是說，程序員不采取任何措施來捕獲它，程序?qū)⒈罎ⅰ?/p>

何時何地捕獲代碼中的異常取決于特定的用例。

例如，我們可能想在堆棧中傳遞一個異常，以使程序完全崩潰。這種情況發(fā)生在， 讓錯誤停止程序比處理無效數(shù)據(jù)來得更安全。

接下來，我們來看看 JavaScript 同步和異步中的錯誤和異常處理。

同步中的錯誤處理

同步代碼在大多數(shù)情況下都很簡單，因此它的錯誤處理也很簡單。

常規(guī)函數(shù)的錯誤處理

同步代碼的執(zhí)行順序與寫入順序相同。我們再看一下前面的例子：

function toUppercase(string) {   if (typeof string !== "string") {     throw TypeError("參數(shù)類型需要是 string 的");   }  return string.toUpperCase(); }toUppercase(4);

在這里，引擎調(diào)用并執(zhí)行toUppercase。所有這些都是同步發(fā)生的。要捕獲同步函數(shù)引發(fā)的異常，我們可以使用try/catch/finally：

try {   toUppercase(4); } catch (error) {   console.error(error.message); } finally { }

try/catch/finally是一個同步結(jié)構(gòu)，但它也可以捕獲異步出現(xiàn)的異常。

使用 generator 函數(shù)來處理錯誤

JavaScript中的生成器函數(shù)是一種特殊的函數(shù)。除了在其內(nèi)部作用域和使用者之間提供雙向通信通道之外，還可以隨意暫停和恢復(fù)。

要創(chuàng)建一個生成器函數(shù)，我們在function關(guān)鍵字后面放一個*：

function* generate() {   // }

在函數(shù)內(nèi)可以使用yield返回值：

function* generate() {   yield 33;   yield 99; }

生成器函數(shù)的返回值是一個迭代器對象(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

成器也可以采用其他方法工作：它們可以接收調(diào)用者返回的值和異常。

除了next()之外，從生成器返回的迭代器對象還具有throw()方法。使用這種方法，我們可以通過向生成器中注入一個異常來停止程序：

function* generate() {   yield 33;   yield 99; }const go = generate(); const firstStep = go.next().value; // 33 go.throw(Error("我要結(jié)束你!")); const secondStep = go.next().value; // 這里會拋出異常

要獲取此錯誤，可以在生成器函數(shù)中使用 try/catch/finally：

function* generate() {   try {     yield 33;     yield 99;   } catch (error) {     console.error(error.message);   }}

下面這個事例是使用 for...of 來獲取 生成器函數(shù)中的值：

function* generate() {   yield 33;   yield 99;     throw Error("我要結(jié)束你!") }try {   for (const value of generate()) {     console.log(value)   }} catch (error) {   console.log(error.message) }/* 輸出：   33   99   我要結(jié)束你! */

異步中的錯誤處理

JavaScript本質(zhì)上是同步的，是一種單線程語言。

諸如瀏覽器引擎之類的宿主環(huán)境使用許多Web API， 增強了 JS 以與外部系統(tǒng)進(jìn)行交互并處理與 I/O 綁定的操作。

瀏覽器中異步操作有：定時器相關(guān)的函數(shù)、事件和 Promise。

異步中的錯誤處理不同于同步的錯誤處理。我們來看一些例子。

定時器的錯誤處理

考慮下面的代碼片段：

function failAfterOneSecond() {   setTimeout(() => {     throw Error("Something went wrong!");   }, 1000); }

這個函數(shù)大約在1秒后拋出異常，處理這個異常的正確方法是什么?

下面的方法不起作用：

function failAfterOneSecond() {   setTimeout(() => {     throw Error("Something went wrong!");   }, 1000); }try {   failAfterOneSecond();} catch (error) {   console.error(error.message); }

我們知道 try/catch 是同步，而 setTimeout 是異步的。當(dāng)執(zhí)行到 setTimeout回調(diào)時，try/catch  早已跑完了，所以異常就無法捕獲到。

它們在兩務(wù)不同的軌道上：

Track A: --> try/catch Track B: --> setTimeout --> callback --> throw

如果能讓程序跑下去，把 try/catch 移動到 setTimeout 里面。但這種做法意義不大，后面我們會使用 Promise  來解決這類的問題。

事件中錯誤處理

DOM  的事件操作(監(jiān)聽和觸發(fā))，都定義在EventTarget接口。Element節(jié)點、document節(jié)點和window對象，都部署了這個接口。此外，XMLHttpRequest、AudioNode、AudioContext等瀏覽器內(nèi)置對象，也部署了這個接口。該接口就是三個方法，addEventListener和removeEventListener用于綁定和移除監(jiān)聽函數(shù)，dispatchEvent用于觸發(fā)事件。

DOM 事件的錯誤處理機制遵循任何異步Web API的相同方案。

考慮下面示例：

const button = document.querySelector("button"); button.addEventListener("click", function() {   throw Error("Can't touch this button!"); });

在這里，單擊按鈕后立即引發(fā)異常。我們?nèi)绾巫プ∷?下面這種方式?jīng)]啥作用，也不會阻止程序崩潰：

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 也是異步執(zhí)行的。

Track A: --> try/catch Track B: --> addEventListener --> callback --> throw

如果能讓程序跑下去，把 try/catch 移動到 addEventListener 里面。但這種做法意義不大，后面我們會使用 Promise  來解決這類的問題。

onerror 怎么樣

HTML元素具有許多事件處理程序，例如onclick，onmouseenter，onchange等，當(dāng)然還有 onerror。

當(dāng) img 標(biāo)簽或 script 標(biāo)簽遇到不存在的資源時，onerror事件處理程序都會觸發(fā)。

考慮下面示例：

... <body>   <img src="nowhere-to-be-found.png" alt="So empty!"> </body> ...

當(dāng)文件不存在時，控制臺就會報如下的錯誤：

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 無關(guān)。

上述內(nèi)容就是JavaScript 錯誤處理的解決過程是怎樣的，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：JavaScript錯誤處理的解決過程是怎樣的
文章起源：http://www.jbt999.com/article4/pspgie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、外貿(mào)網(wǎng)站建設(shè)、Google、網(wǎng)站策劃、微信公眾號、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)