做者：Ashish Lahoti
譯者：前端小智
來源：codingnconcept
點贊再看，微信搜索
【大遷世界】,B站關注【
前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文
GitHub
https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。**
最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。javascript
github 地址：https://github.com/qq44924588...前端
今天的內容中，咱們來學習一下使用try、catch、finally和throw進行錯誤處理。咱們還會講一下 JS 中內置的錯誤對象(Error, SyntaxError, ReferenceError等)以及如何定義自定義錯誤。vue
1.使用 try..catch..finally..throw
在 JS 中處理錯誤，咱們主要使用try、catch、finally和throw關鍵字。java
try塊包含咱們須要檢查的代碼- 關鍵字
throw用於拋出自定義錯誤 catch塊處理捕獲的錯誤finally塊是最終結果不管如何，都會執行的一個塊，能夠在這個塊裏面作一些須要善後的事情
1.1 try
每一個try塊必須與至少一個catch或finally塊，不然會拋出SyntaxError錯誤。git
咱們單獨使用try塊進行驗證：github
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塊捕獲。express
try {
~!$%^&*
} catch(err) {
console.log("這裏不會被執行");
}
➤ ⓧ Uncaught SyntaxError: Invalid or unexpected token
1.2.2 try..catch 與 異步代碼
一樣，try..catch沒法捕獲在異步代碼中引起的異常，例如setTimeout：json
try {
setTimeout(function() {
noSuchVariable; // undefined variable
}, 1000);
} catch (err) {
console.log("這裏不會被執行");
}
未捕獲的ReferenceError將在1秒後引起:promise
➤ ⓧ 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 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。
本文同步分享在 博客「前端小智」（SegmentFault）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。