作為Web前端工程師，JavaScript try…catch是我們使用的功能之一。

try….catch 可以捕獲代碼中的異常并防止應(yīng)用程序崩潰。但是 try…catch 不僅僅只是捕獲異常。在本文中，我將分享 10 個(gè)使用 try…catch 的有用技巧，讓您更輕松地處理異常。

1.捕獲所有異常

如果要捕獲代碼中所有可能的異常，可以使用不帶參數(shù)的 catch 塊。例如

try {
// code that may throw an exception
} catch {
// code that handles all exceptions
}

這種方法將捕獲所有異常，包括語(yǔ)法錯(cuò)誤、運(yùn)行時(shí)錯(cuò)誤和自定義錯(cuò)誤。但是，在生產(chǎn)環(huán)境中使用時(shí)，建議具體指定要捕獲的異常類型，以便更好地診斷問(wèn)題。

2.捕獲特定類型的異常

如果只想捕獲特定類型的異常，可以在 catch 塊中使用條件語(yǔ)句。例如，下面的代碼塊只會(huì)捕獲 TypeError 異常：

try {
// code that may throw a TypeError exception
} catch (error) {
if (error instanceof TypeError) {
// code that handles TypeError exceptions
}
}

您還可以使用 switch 語(yǔ)句檢查異常類型：

try {
// code that may throw an exception
} catch (error) {
switch (error.constructor) {
case TypeError.
// Code to handle TypeError exceptions
break.
case RangeError.
// Code to handle RangeError exceptions
break.
// …
}
}

3.捕捉異步異常

如果您使用異步代碼，您可能需要在異步代碼中捕獲異常。例如，以下代碼塊使用 Promise 異步加載資源：

try {
const resource = await fetch(“/resource”).
// the code to handle the resource
} catch (error) {
// code to handle exceptions
}

如果在異步操作期間發(fā)生異常，它將被傳遞到 catch 塊。但是，如果您不使用 try…catch 來(lái)捕獲異常，它將被視為未處理的異常。

4.finally塊中清理資源

如果您正在使用需要手動(dòng)清理的資源（例如文件句柄或網(wǎng)絡(luò)連接），您可以在 finally 塊中執(zhí)行此操作。finally 塊中的代碼無(wú)論try 塊中是否發(fā)生異常都會(huì)執(zhí)行。例如：

let resource.
try {
resource = acquireResource().
// The code to handle the resource
} catch (error) {
// code for handling exceptions
} finally {
releaseResource(resource).
}

5.拋出異常

try…catch 不僅可以捕獲異常，還可以拋出異常。您可以使用 throw 語(yǔ)句在代碼中手動(dòng)拋出異常。例子：

function divide(a, b) {
if (b === 0) {
throw new Error(“The divisor cannot be zero”).
}
return a / b.
}

如果 b divide 函數(shù)的值為 0，則會(huì)拋出異常并顯示錯(cuò)誤信息。您可以使用 try…catch it 來(lái)捕獲異常并執(zhí)行適當(dāng)?shù)牟僮鳌?/p>

6.在異常中傳遞附加信息

拋出異常時(shí)，可以傳遞一些額外的信息來(lái)幫助調(diào)試問(wèn)題。例如：

function divide(a, b) {
if (b === 0) {
throw new Error(“Divide cannot be zero”, { a, b }).
}
return a / b.
}

在此示例中，當(dāng)除數(shù)為零時(shí)，異常對(duì)象包含 a 和 b 的值。當(dāng)您捕獲此異常時(shí)，您可以訪問(wèn)這些值并執(zhí)行適當(dāng)?shù)牟僮鳌?/p>

7. 拋回異常

有時(shí)，在處理異常時(shí)，需要重新拋出異常，讓更高層的代碼來(lái)處理。您可以使用 throw 語(yǔ)句重新拋出異常。例如：

try {
// code that may throw an exception
} catch (error) {
// code that handles exceptions
throw error.
}

在這個(gè)例子中，異常被重新拋出并傳遞給調(diào)用函數(shù)進(jìn)行處理。

8. 捕獲錯(cuò)誤并忽略它們

有時(shí)，在調(diào)試代碼時(shí)，您可能希望暫時(shí)忽略一些錯(cuò)誤。您可以使用空的 catch 代碼塊來(lái)忽略異常。例如：

try {
// code that may throw an exception
} catch {
// Ignore exceptions
}

但是，不建議在生產(chǎn)環(huán)境中使用這種方法。在生產(chǎn)環(huán)境中忽略異常可能會(huì)導(dǎo)致代碼出現(xiàn)不可預(yù)測(cè)的行為。

9. 使用 Promise.catch 方法

如果您將 Promise 用于異步代碼，則可以使用 Promise.catch 方法來(lái)捕獲異常。例如：

fetch(“/resource”)
.then((response) => response.json())
.then((data) => {
// code to process the data
})
.catch((error) => {
// code for handling exceptions
}).

本例中，如果fetch或json方法返回異常，則傳遞給catch方法處理。

10. 使用 window.onerror

最后一個(gè)技巧是使用 window.onerror 全局捕獲異常。當(dāng)頁(yè)面出現(xiàn)未處理的異常時(shí)，將調(diào)用 window.onerror。可以在window.onerror中記錄異常信息，方便生產(chǎn)環(huán)境診斷問(wèn)題。例如：

window.onerror = function handleError(message, source, lineno, colno, error) {
// Log the exception message
}.

本例中，當(dāng)頁(yè)面出現(xiàn)異常時(shí)會(huì)調(diào)用handleError函數(shù)，并將異常信息作為參數(shù)傳入。您可以在該函數(shù)中記錄異常信息，并發(fā)送給服務(wù)器進(jìn)行分析。

結(jié)論

在 JavaScript 中，try…catch 是一個(gè)強(qiáng)大的異常處理工具。它可以幫助您診斷和調(diào)試代碼中的問(wèn)題，并確保您的代碼在運(yùn)行時(shí)處理異常。通過(guò)掌握這 10 個(gè)技巧，您可以更好地使用 try…catch 并編寫更健壯的代碼。