JavaScript 中 try...catch 的 10 個使用技巧

pingan8787發表於2023-04-11
JavaScript

作為一位 Web 前端工程師，JavaScript 中的 try...catch 是我們常用的特性之一。

try...catch 可以捕獲程式碼中的異常並防止應用程式崩潰。但是try...catch 不僅僅是簡單地捕獲異常。本文我將分享 10 個有用的 try...catch 使用技巧，讓你在處理異常時更加得心應手。

1. 捕獲所有異常

如果你想捕獲程式碼中所有可能的異常，可以使用一個不帶引數的 catch 程式碼塊。例如：

try {
  // 可能會丟擲異常的程式碼
} catch {
  // 處理所有異常的程式碼
}

這種方式會捕獲所有異常，包括語法錯誤、執行時錯誤和自定義錯誤。但是，在生產環境中使用時，建議具體指定要捕獲的異常型別，以便更好地診斷問題。

2. 捕獲特定型別的異常

如果你只想捕獲特定型別的異常，可以在 catch 程式碼塊中使用條件語句。例如，以下程式碼塊只會捕獲 TypeError 異常：

try {
  // 可能會丟擲 TypeError 異常的程式碼
} catch (error) {
  if (error instanceof TypeError) {
    // 處理 TypeError 異常的程式碼
  }
}

你也可以使用 switch 語句來檢查異常型別：

try {
  // 可能會丟擲異常的程式碼
} catch (error) {
  switch (error.constructor) {
    case TypeError:
      // 處理 TypeError 異常的程式碼
      break;
    case RangeError:
      // 處理 RangeError 異常的程式碼
      break;
    // ...
  }
}

3. 捕獲非同步異常

如果你使用了非同步程式碼，你可能需要捕獲非同步程式碼中的異常。例如，以下程式碼塊使用 Promise 來非同步載入資源：

try {
  const resource = await fetch("/resource");
  // 處理資源的程式碼
} catch (error) {
  // 處理異常的程式碼
}

如果在非同步操作中發生異常，它會被傳遞到 catch 程式碼塊中。但是，如果你沒有使用 try...catch 來捕獲異常，它將被視為未處理的異常。

4. 在 finally 程式碼塊中清理資源

如果你使用了一些需要手動清理的資源（例如檔案控制程式碼或網路連線），可以在 finally 程式碼塊中進行清理操作。無論 try 程式碼塊中是否發生異常，finally 程式碼塊中的程式碼都會執行。例如：

let resource;
try {
  resource = acquireResource();
  // 處理資源的程式碼
} catch (error) {
  // 處理異常的程式碼
} finally {
  releaseResource(resource);
}

5. 丟擲異常

try...catch 不僅可以捕獲異常，還可以丟擲異常。你可以使用 throw 語句在程式碼中手動丟擲異常。例如：

function divide(a, b) {
  if (b === 0) {
    throw new Error("除數不能為零");
  }
  return a / b;
}

如果在 divide 函式中 b 的值為 0，則會丟擲一個包含錯誤訊息的異常。你可以使用 try...catch 來捕獲這個異常並執行相應的操作。

6. 在異常中傳遞額外資訊

在丟擲異常時，你可以傳遞一些額外的資訊來幫助除錯問題。例如：

function divide(a, b) {
  if (b === 0) {
    throw new Error("除數不能為零", { a, b });
  }
  return a / b;
}

在這個例子中，異常物件包含了除數為零時的 a 和 b 的值。當你捕獲這個異常時，你可以訪問這些值並進行相應的操作。

7. 將異常重新丟擲

有時，在處理異常時，你需要將異常重新丟擲以便於更高層次的程式碼進行處理。你可以使用 throw 語句來重新丟擲異常。例如：

try {
  // 可能會丟擲異常的程式碼
} catch (error) {
  // 處理異常的程式碼
  throw error;
}

在這個例子中，異常會被重新丟擲並傳遞到呼叫函式中進行處理。

8. 捕獲錯誤並忽略它們

有時，在除錯程式碼時，你可能希望暫時忽略一些錯誤。你可以使用空的 catch 程式碼塊來忽略異常。例如：

try {
  // 可能會丟擲異常的程式碼
} catch {
  // 忽略異常
}

但是，建議不要在生產環境中使用這種方式。在生產環境中忽略異常可能會導致程式碼無法預料的行為。

9. 使用 Promise.catch 方法

如果你使用 Promise 來處理非同步程式碼，你可以使用 Promise.catch 方法來捕獲異常。例如：

fetch("/resource")
  .then((response) => response.json())
  .then((data) => {
    // 處理資料的程式碼
  })
  .catch((error) => {
    // 處理異常的程式碼
  });

在這個例子中，如果 fetch 或 json 方法返回異常，它們會被傳遞到 catch 方法中進行處理。

10. 使用 window.onerror

最後一個技巧是使用 window.onerror 來全域性捕獲異常。當頁面中發生未處理的異常時，window.onerror 會被呼叫。你可以在 window.onerror 中記錄異常資訊，以便於在生產環境中診斷問題。例如：

window.onerror = function handleError(message, source, lineno, colno, error) {
  // 記錄異常資訊
};

在這個例子中，當頁面中發生異常時，handleError 函式會被呼叫，並將異常資訊作為引數傳遞進來。你可以在這個函式中記錄異常資訊並將其傳送到伺服器以便於分析。

結論

在 JavaScript 中，try...catch 是一個強大的異常處理工具。它可以幫助你診斷和除錯程式碼中的問題，並確保你的程式碼在執行時能夠處理異常情況。透過掌握這 10 個使用技巧，你可以更好地使用 try...catch 並編寫出更健壯的程式碼。

相關文章