try..catch 不能捕獲的錯誤有哪些？注意事項又有哪些？

前端小智發表於2021-10-26
作者：Ashish Lahoti
譯者：前端小智
來源：codingnconcept

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

今天的內容中，我們來學習一下使用try、catch、finally和throw進行錯誤處理。我們還會講一下 JS 中內建的錯誤物件(Error, SyntaxError, ReferenceError等)以及如何定義自定義錯誤。

1.使用 try..catch..finally..throw

在 JS 中處理錯誤，我們主要使用try、catch、finally和throw關鍵字。

  • try塊包含我們需要檢查的程式碼
  • 關鍵字throw用於丟擲自定義錯誤
  • catch塊處理捕獲的錯誤
  • finally 塊是最終結果無論如何，都會執行的一個塊，可以在這個塊裡面做一些需要善後的事情

1.1 try

每個try塊必須與至少一個catch或finally塊，否則會丟擲SyntaxError錯誤。

我們單獨使用try塊進行驗證：

try {
  throw new Error('Error while executing the code');
}
ⓧ Uncaught SyntaxError: Missing catch or finally after try

1.2 try..catch

建議將try與catch塊一起使用，它可以優雅地處理try塊丟擲的錯誤。

try {
  throw new Error('Error while executing the code');
} catch (err) {
  console.error(err.message);
}
➤ ⓧ Error while executing the code

1.2.1 try..catch 與 無效程式碼

try..catch 無法捕獲無效的 JS 程式碼，例如try塊中的以下程式碼在語法上是錯誤的，但它不會被catch塊捕獲。

try {
  ~!$%^&*
} catch(err) {
  console.log("這裡不會被執行");
}
➤ ⓧ Uncaught SyntaxError: Invalid or unexpected token

1.2.2 try..catch 與 非同步程式碼

同樣，try..catch無法捕獲在非同步程式碼中引發的異常，例如setTimeout：

try {
  setTimeout(function() {
    noSuchVariable;   // undefined variable
  }, 1000);
} catch (err) {
  console.log("這裡不會被執行");
}

未捕獲的ReferenceError將在1秒後引發:

➤ ⓧ Uncaught ReferenceError: noSuchVariable is not defined

所以 ，我們應該在非同步程式碼內部使用 try..catch 來處理錯誤：

setTimeout(function() {
  try {
    noSuchVariable;
  } catch(err) {
    console.log("error is caught here!");
  }
}, 1000);

1.2.3 巢狀 try..catch

我們還可以使用巢狀的try和catch塊向上丟擲錯誤，如下所示：

try {
  try {
    throw new Error('Error while executing the inner code');
  } catch (err) {
    throw err;
  }
} catch (err) {
  console.log("Error caught by outer block:");
  console.error(err.message);
}
Error caught by outer block:
➤ ⓧ Error while executing the code

1.3 try..finally

不建議僅使用 try..finally 而沒有 catch 塊，看看下面會發生什麼：

try {
  throw new Error('Error while executing the code');
} finally {
  console.log('finally');
}
finally
➤ ⓧ Uncaught Error: Error while executing the code

這裡注意兩件事：

  • 即使從try塊丟擲錯誤後，也會執行finally塊
  • 如果沒有catch塊，錯誤將不能被優雅地處理，從而導致未捕獲的錯誤

1.4 try..catch..finally

建議使用try...catch塊和可選的finally塊。

try {
  console.log("Start of try block");
  throw new Error('Error while executing the code');
  console.log("End of try block -- never reached");
} catch (err) {
  console.error(err.message);
} finally {
  console.log('Finally block always run');
}
console.log("Code execution outside try-catch-finally block continue..");
Start of try block
➤ ⓧ Error while executing the code
Finally block always run
Code execution outside try-catch-finally block continue..

這裡還要注意兩件事：

  • 在try塊中丟擲錯誤後往後的程式碼不會被執行了
  • 即使在try塊丟擲錯誤之後，finally塊仍然執行

finally塊通常用於清理資源或關閉流，如下所示：

try {
  openFile(file);
  readFile(file);
} catch (err) {
  console.error(err.message);
} finally {
  closeFile(file);
}

1.5 throw

throw語句用於引發異常。

throw <expression>
// throw primitives and functions
throw "Error404";
throw 42;
throw true;
throw {toString: function() { return "I'm an object!"; } };

// throw error object
throw new Error('Error while executing the code');
throw new SyntaxError('Something is wrong with the syntax');
throw new ReferenceError('Oops..Wrong reference');

// throw custom error object
function ValidationError(message) {
  this.message = message;
  this.name = 'ValidationError';
}
throw new ValidationError('Value too high');

2. 非同步程式碼中的錯誤處理

對於非同步程式碼的錯誤處理可以Promise和async await。

2.1 Promise 中的 then..catch

我們可以使用then()和catch()連結多個 Promises，以處理鏈中單個 Promise 的錯誤，如下所示：

Promise.resolve(1)
  .then(res => {
      console.log(res);  // 列印 '1'

      throw new Error('something went wrong');  // throw error

      return Promise.resolve(2);  // 這裡不會被執行
  })
  .then(res => {
      // 這裡也不會執行，因為錯誤還沒有被處理
      console.log(res);    
  })
  .catch(err => {
      console.error(err.message);  // 列印 'something went wrong'
      return Promise.resolve(3);
  })
  .then(res => {
      console.log(res);  // 列印 '3'
  })
  .catch(err => {
      // 這裡不會被執行
      console.error(err);
  })

我們來看一個更實際的示例，其中我們使用fetch呼叫API，該 API 返回一個promise物件，我們使用catch塊優雅地處理 API 失敗。

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

fetch("http://httpstat.us/500")
    .then(handleErrors)
    .then(response => console.log("ok"))
    .catch(error => console.log("Caught", error));
Caught Error: Internal Server Error
    at handleErrors (<anonymous>:3:15)

2.2 try..catch 和 async await

在 async await 中 使用 try..catch 比較容易：

(async function() {
    try {
        await fetch("http://httpstat.us/500");
    } catch (err) {
        console.error(err.message);
    }
})();

讓我們看同一示例，其中我們使用fetch呼叫API，該API返回一個promise物件， 我們使用try..catch塊優雅地處理API失敗。

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
}

(async function() {
    try {
      let response = await fetch("http://httpstat.us/500");
      handleErrors(response);
      let data = await response.json();
      return data;
    } catch (error) {
        console.log("Caught", error)
    }
})();
Caught Error: Internal Server Error
    at handleErrors (<anonymous>:3:15)
    at <anonymous>:11:7

3. JS 中的內建錯誤

3.1 Error

JavaScript 有內建的錯誤物件，它通常由try塊丟擲，並在catch塊中捕獲，Error 物件包含以下屬性：

  • name：是錯誤的名稱，例如 “Error”, “SyntaxError”, “ReferenceError” 等。
  • message：有關錯誤詳細資訊的訊息。
  • stack：是用於除錯目的的錯誤的堆疊跟蹤。

我們建立一個Error 物件，並檢視它的名稱和訊息屬性:

const err = new Error('Error while executing the code');

console.log("name:", err.name);
console.log("message:", err.message);
console.log("stack:", err.stack);
name: Error
message: Error while executing the code
stack: Error: Error while executing the code
    at <anonymous>:1:13

JavaScript 有以下內建錯誤，這些錯誤是從 Error 物件繼承而來的

3.2 EvalError

EvalError 表示關於全域性eval()函式的錯誤，這個異常不再由 JS 丟擲，它的存在是為了向後相容。

3.3 RangeError

當值超出範圍時，將引發RangeError。

➤ [].length = -1
ⓧ Uncaught RangeError: Invalid array length

3.4 ReferenceError

當引用一個不存在的變數時，將引發 ReferenceError。

➤ x = x + 1;
ⓧ Uncaught ReferenceError: x is not defined

3.5 SyntaxError

當你在 JS 程式碼中使用任何錯誤的語法時，都會引發SyntaxError。

➤ function() { return 'Hi!' }
ⓧ Uncaught SyntaxError: Function statements require a function name

➤ 1 = 1
ⓧ Uncaught SyntaxError: Invalid left-hand side in assignment

➤ JSON.parse("{ x }");
ⓧ Uncaught SyntaxError: Unexpected token x in JSON at position 2

3.6 TypeError

如果該值不是預期的型別，則丟擲TypeError。

➤ 1();
ⓧ Uncaught TypeError: 1 is not a function

➤ null.name;
ⓧ Uncaught TypeError: Cannot read property 'name' of null

3.7 URIError

如果以錯誤的方式使用全域性 URI 方法，則會丟擲URIError。

➤ decodeURI("%%%");
ⓧ Uncaught URIError: URI malformed

4. 定義並丟擲自定義錯誤

我們也可以用這種方式定義自定義錯誤。

class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = "CustomError";
  } 
};

const err = new CustomError('Custom error while executing the code');

console.log("name:", err.name);
console.log("message:", err.message);
name: CustomError
message: Custom error while executing the code

我們還可以進一步增強CustomError物件以包含錯誤程式碼

class CustomError extends Error {
  constructor(message, code) {
    super(message);
    this.name = "CustomError";
    this.code = code;
  } 
};

const err = new CustomError('Custom error while executing the code', "ERROR_CODE");

console.log("name:", err.name);
console.log("message:", err.message);
console.log("code:", err.code);
name: CustomError
message: Custom error while executing the code
code: ERROR_CODE

在try..catch塊中使用它：

try{
  try {
    null.name;
  }catch(err){
    throw new CustomError(err.message, err.name);  //message, code
  }
}catch(err){
  console.log(err.name, err.code, err.message);
}
CustomError TypeError Cannot read property 'name' of null

我是小智，我們下期見！

編輯中可能存在的bug沒法實時知道，事後為了解決這些bug,花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://codings.com/javascrip...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章