搜尋

首頁  >  文章  >  web前端  >  一起分析JavaScript異常處理方式

一起分析JavaScript異常處理方式

WBOY
WBOY轉載
2022-08-04 16:27:341550瀏覽

本篇文章為大家帶來了關於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="logo.png" onerror="alert(&#39;Error loading picture.&#39;)" />

在 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中文網其他相關文章！

陳述：
本文轉載於：jianshu.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：JavaScript之常用事件類型整理下一篇：JavaScript之常用事件類型整理

相關文章

看更多