搜尋
首頁web前端js教程一起分析JavaScript異常處理方式

本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了關於異常處理的相關問題,編寫程式的過程難免會出現一些錯誤,透過這些產生的錯誤,我們可以學會如何避免遇到這樣的情況,以及如何在下次做的更好,下面一起來看一下,希望對大家有幫助。

一起分析JavaScript異常處理方式

【相關推薦:javascript影片教學web前端

錯誤是程式設計過程的一部分。編寫程式的過程難免會出現一些錯誤,透過這些產生的錯誤,我們可以學習如何避免遇到這樣的情況,以及如何在下次做的更好。

在 JavaScript 中,當程式碼語句緊密耦合並產生錯誤時,繼續使用剩餘的程式碼語句是沒有意義的。相反,我們試圖盡可能優雅地從錯誤中恢復過來。 JavaScript 解釋器會在出現此類錯誤時檢查異常處理程式碼,如果沒有異常處理程序,程式將傳回導致錯誤的任何函數。

對呼叫堆疊上的每個函數重複此操作,直到找到異常處理程序或到達頂層函數,從而導致程式以錯誤終止,導致程式的崩潰。

#一般來說,有兩種處理方式:

  • #拋出例外— 如果在執行時發生的問題無法得到有意義的處理,最好拋出它

function openFile(fileName) {
  if (!exists(fileName)) {
    throw new Error('找不到文件 ' + fileName)
  }
  // ...
}
  • #捕獲異常— 拋出的異常在運行時更有意義的地方被捕獲和處理

try {
  openFile('../test.js')
} catch(e) {
  // 优雅地处理抛出的期望
}

讓我們更詳細地了解這些操作。

拋出例外

您可能會看到類似 ReferenceError: specs is not defined 這樣的情況。這表示透過 throw 語句引發的異常。

語法

throw «value»
// 不要这样做
if (somethingBadHappened) {
  throw 'Something bad happened'
}

對可以作為異常拋出的資料類型沒有限制,但 JavaScript 具有特殊的內建異常類型。其中之一是 Error,正如您在前面的範例中所看到的。這些內建的異常類型為我們提供了比異常訊息更多的細節。

Error

Error 類型用來表示一般例外。這種類型的異常最常用於實現使用者定義的異常。它有兩個內建屬性可供使用。

  • message — 作為參數傳遞給 Error 建構子的內容。例如,new Error('This is an error message')。您可以透過 message 屬性存取訊息。

const myError = new Error('Error!!!')
console.log(myError.message) // Error!!!
  • stack — 此屬性傳回導致錯誤的檔案的歷史記錄(呼叫堆疊)。堆疊頂部還包括 message,後面是實際堆疊,從最新/隔離的錯誤點開始,到最外部負責的檔案。

Error: Error!!!
    at <anonymous>:1:1

注意:new Error('...') 在拋出之前不會執行任何操作,即throw new Error('error msg')  將在JavaScript 中建立一個Error 實例,並停止腳本的執行,除非您對Error 錯誤執行某些操作,例如捕獲它。

捕捉異常

現在我們知道了什麼是例外以及如何拋出它們,讓我們討論如何透過捕捉它們來阻止它們破壞我們的程式。

try-catch-finally 是處理例外狀況最簡單的方法。

try {
  // 要运行的代码
} catch (e) {
  // 发生异常时要运行的代码
}
  
[ // 可选
  finally {
    // 无论发生异常都始终执行的代码
  }
]

在 try 子句中,我們加入了可能產生異常的程式碼。如果發生異常,則執行 catch 子句。

有時,無論程式碼是否產生異常,都需要執行程式碼,這時我們可以使用可選區塊 finally。

即使 try 或 catch 子句執行 return 語句,finally 區塊也會執行。例如,以下函數傳回 'Execute finally',因為 finally 子句是最後執行的內容。

function foo() {
  try {
    return true
  } finally {
    console.log(&#39;Execute finally&#39;)
  }
}

我們在無法事先檢查程式碼正確性的地方使用 try-catch。

const user = &#39;{"name": "D.O", "age": 18}&#39;
try {
  // 代码运行
  JSON.parse(params)
  // 在出现错误的情况下,其余的代码将永远无法运行
  console.log(params)
} catch (err) {
  // 在异常情况下运行的代码
  console.log(err.message) // params is not defined
}

如上所示,在執行程式碼之前,不可能檢查 JSON.parse 以獲得 stringify 物件或字串。

注意:您可以擷取程式產生的異常和執行時間異常,但無法擷取 JavaScript 語法錯誤。

try-catch-finally 只能捕捉同步錯誤。如果我們嘗試將其用於非同步程式碼,那麼在非同步程式碼完成其執行之前,try-catch-finally 可能已經執行了。

如何處理非同步程式碼區塊中的異常

回呼函數

使用回呼函數(不建議),我們通常會收到兩個如下所示的參數:

async function(code, (err, result) => {
  if (err) return console.error(err)
  console.log(result)
})

我們可以看到有兩個參數:err 和result。如果有錯誤,err 參數將等於該錯誤,我們可以拋出該錯誤來進行異常處理。

在 if (err) 块中返回某些内容或将其他指令包装在 else 块中都很重要。否则,您可能会遇到另一个错误。例如,当您尝试访问 result.data 时,result 可能未定义。

Promises

使用 promises 的 then 或者 catch,我们可以通过将错误处理程序传递给 then 方法或使用 catch 子句来处理错误。

promise.then(onFulfilled, onRejected)

也可以使用 .catch(onRejected) 而不是 .then(null, onRejected) 添加错误处理程序,其工作方式相同。

让我们看一个 .catch 拒绝 Promise 的例子。

Promise.resolve(&#39;1&#39;)
  .then(res => {
    console.log(res) // 1
    throw new Error(&#39;go wrong&#39;) // 抛出异常
})
.then(res => {
  console.log(res) // 不会被执行
})
.catch(err => { 
  console.error(err) // 捕获并处理异常 ——> Error: go wrong
})

使用 async/await 和 try-catch

使用 async/await 和 try-catch-finally,处理异常是轻而易举的事。

async function func() {
  try {
    await nonExistentFunction()
  } catch (err) {
    console.error(err) // ReferenceError: nonExistentFunction is not defined 
  }
}

如何处理未捕获的异常

现在我们已经很好地理解了如何在同步和异步代码块中执行异常处理,让我们回答本文最后一个待解决的问题 :我们如何处理未捕获的异常?

在浏览器中

我们可以使用 window.onerror() 方法来处理未捕获的异常。每当运行时发生错误时,该方法会在 window 对象上触发 error 事件。

onerror() 的另一个实用做法是:当站点中的图片或视频等数据加载出错时,可以用该方法触发某些操作。例如,提供一张加载出错时的图片,或显示一条消息。

<img  src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy"   onerror="alert(&#39;Error loading picture.&#39;)" / alt="一起分析JavaScript異常處理方式" >

在 Node.js 中

EventEmitter 模块派生的 process 对象可以订阅事件 uncaughtException。

process.on(&#39;uncaughtException&#39;, () => {})`

我们可以传递一个回调来处理异常。如果我们尝试捕获这个未捕获的异常,进程将不会终止,因此我们必须手动完成。

uncaughtException 仅适用于同步代码。对于异步代码,还有另一个称为 unhandledRejection 的事件。

process.on(&#39;unhandledRejection&#39;, () => {})

决不要尝试为基本 Error 类型实现 “捕获所有” 处理程序。这将混淆所发生的一切,并损害代码的可维护性和可扩展性。

关键要点

throw 语句用于生成用户定义的异常。在运行时,当 throw 遇到语句时,当前函数的执行将停止,控制权将传递给 catch 调用堆栈中的第一个子句。如果没有 catch 子句,程序将终止

JavaScript 有一些内置的异常类型,最值得注意的是 Error,它返回 Error 中的两个重要属性:stack 和 message。

try 子句将包含可能产生异常的代码,catch 子句会在发生异常时执行。

对于异步代码,最好使用 async/await 配合 try-catch 语句。

可以捕获未处理的异常,这可以防止应用程序崩溃。

不要觉得麻烦,异常处理可以帮助您提高代码的可维护性、可扩展性和可读性。

【相关推荐:javascript视频教程web前端

以上是一起分析JavaScript異常處理方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:简书。如有侵權,請聯絡admin@php.cn刪除
JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript:它的作用以及為什麼重要神秘的JavaScript:它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python還是JavaScript更好?Python還是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器