JS?try?catch用法舉例之異常處理
更新時間：2024年06月14日 08:25:57 作者：扶蘇1002
JavaScript try…catch是我們使用的功能之一,作為Web前端工程師,JavaScript try…catch是我們使用的功能之一,這篇文章主要給大家介紹了關于JS?try?catch用法舉例之異常處理的相關資料,需要的朋友可以參考下
一、語法
try語句包含了由一個或者多個語句組成的try塊，和至少一個catch塊或者一個finally塊的其中一個，或者兩個兼有，下面是三種形式的try聲明：
try...catch try...finally try...catch...finally
try {
// 需要被執(zhí)行的語句
} catch (err) {
// 如果在try塊里有異常被拋出時執(zhí)行的語句
} finally {
// 在try語句塊之后執(zhí)行的語句塊。無論是否有異常拋出或捕獲這些語句都將執(zhí)行。
}
上述代碼中，
try塊中的語句首先被執(zhí)行。如果運行中發(fā)生了錯誤，控制就會轉移到位于catch塊中語句，其中括號中的err參數(shù)被作為例外變量傳遞。否則，catch塊的語句被跳過不執(zhí)行。無論是發(fā)生錯誤還是catch塊中的語句執(zhí)行完畢，或者沒有發(fā)生任何錯誤try塊中的語句執(zhí)行完畢，最后將執(zhí)行finally塊中的語句。
二、舉例
2.1. 無錯誤情況
try {
alert('開始執(zhí)行 try1'); // (1)
alert('開始執(zhí)行 try2'); // (2)
} catch (err) {
alert('catch 被忽略，因為沒有 error，不會被執(zhí)行'); // (3)
}
上面代碼會彈出‘開始執(zhí)行
try1’和開始執(zhí)行try2，但是不會彈出‘catch被忽略，因為沒有error
2. 2. 有錯誤情況
try {
alert('開始執(zhí)行 try1'); // (1)
throw "此處拋出錯誤"; //try塊里到此結束，不會在執(zhí)行下邊的try2
alert('try2，不會被執(zhí)行'); // (2)
} catch (err) {
alert('出現(xiàn)了 error，此句被執(zhí)行'); // (3)
}
上面代碼會彈出‘開始執(zhí)行
try1’和‘出現(xiàn)了error，此句被執(zhí)行’
2.3. try…catch 僅對可以運行的代碼有效
要使得
try...catch能工作，代碼必須是可執(zhí)行的。換句話說，它必須是有效的JavaScript代碼。
如果代碼包含語法錯誤，那么try..catch將無法正常工作，例如下邊代碼出現(xiàn)了一行逗號：
try {
，，，，，，//js引擎無法理解這段代碼，它是無效的
throw "此處不會拋出錯誤"; //不會執(zhí)行
alert('try2，此句不會被執(zhí)行'); // (2)
} catch (err) {
alert('此句不會被執(zhí)行'); // (3)
}
2.4. try catch 嵌套
try {
try {
throw new Error("try1");
}
finally {
console.log("finally");
}
}
catch (err) {
console.error("outer", err.message);
}
會輸出
// finally
// outer try1
try {
try {
throw new Error("try1");
}
catch (err) {
console.error("inner", err.message);
}
finally {
console.log("finally");
}
}
catch (err) {
console.error("outer", err.message);
}
會輸出
// inner try1
// finally
try {
try {
throw new Error("try1");
}
catch (err) {
console.error("inner", err.message);
// return 如果我在此處寫個return會是什么結果？ （下邊的報錯信息肯定不會拋出了，當然return必須是在函數(shù)里）
throw new Error("try2"); //試想一下，如何把此句代碼放在下邊的finally里會怎么輸出？（結果一樣）
}
finally {
console.log("finally");
}
}
catch (err) {
console.error("outer", err.message);
}
會輸出
// inner try1
// finally
// outer try2
try {
try {
throw new Error("try1");
}
catch (err) {
console.error("inner", err.message);
throw new Error("try2");
}
finally {
console.log("finally");
return //終止了錯誤的拋出
}
}
catch (err) {
console.error("outer", err.message); //不會被執(zhí)行
}
會輸出
// inner try1
// finally
2.5. try…catch 無法捕獲異步任務異常
2.5.1. 異步任務->宏任務setTimeout
try {
setTimeout(()=>{
throw new Error('錯誤信息')
}, 1000);
} catch (err) {
alert( "alert不會執(zhí)行" );
}
因為
try...catch包裹了計劃要執(zhí)行的函數(shù)，該函數(shù)有延遲，這時js引擎已經(jīng)離開了try...catch結構，也就是上下文環(huán)境已經(jīng)改變，所以無法捕獲異步任務里的錯誤。為了捕獲到計劃的函數(shù)中的異常，那么try...catch必須在這個setTimeout函數(shù)內(nèi)，如下
setTimeout(() => {
try {
throw new Error("錯誤信息");
} catch (err) {
alert("alert會執(zhí)行");
}
}, 1000);
2.5.2. 異步任務->微任務promise
try...catch也不會捕獲微任務的異常，道理同2.5.1這2段代碼try，catch都不會捕獲到錯誤信息，因為promise內(nèi)部的錯誤不會冒泡出來，而是被promise吃掉了，只有通過promise.catch才可以捕獲promise的錯誤情況。
function test() {
Promise.resolve("1").then(() => {
throw new Error("錯誤信息");
});
}
try {
test();
} catch (err) {
alert("不工作");
}
try {
Promise.reject("錯誤信息");
} catch (e) {
console.log(e.message);
}
2.6. try…catch async/await 的異常捕獲
async/await可以讓異步代碼同步執(zhí)行，所以可以進行異常捕獲
// 例子1
async function test() {
throw new Error("錯誤信息");
return 0;
}
test()
.then()
.catch((e) => console.log(e.message)); // 錯誤信息(可以捕獲到錯誤信息)
// 例子2
function promiseFn() {
return new Promise((resolve, reject) => {
throw new Error("錯誤信息");
});
}
async function test() {
try {
const res = await promiseFn();
} catch (e) {
console.log(e.message); //錯誤信息(可以捕獲到錯誤信息)
}
}
test();
// 例子3
function promiseFn() {
return Promise.reject("錯誤信息");
}
async function test() {
try {
const res = await promiseFn();
} catch (e) {
console.log(e); //錯誤信息(可以捕獲到錯誤信息)
}
}
test();
2.7. 全局監(jiān)聽拋出的錯誤
- 以上所有異常，僅通過
try catch、then捕獲同步、異步錯誤。 - 這些是局部錯誤捕獲手段，當我們無法保證所有代碼都處理了異常時，可以進行全局異常監(jiān)控
一般有兩種方法：
- window.addEventListener(‘error’)
- window.addEventListener(‘unhandledrejection’)
- error 可以監(jiān)聽所有同步、異步的運行時錯誤，但無法監(jiān)聽語法、接口、資源加載錯誤。
- 而 unhandledrejection 可以監(jiān)聽到 Promise 中拋出的，未被 .catch 捕獲的錯誤。
window.addEventListener("error", function (e) {
var error = e.error;
console.log(error); //錯誤信息
});
document.querySelector("button").addEventListener("click", () => {
throw new Error("錯誤信息");
});總結
到此這篇關于JS try catch用法舉例之異常處理的文章就介紹到這了,更多相關JS try catch異常處理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼
這篇文章主要介紹了JS 動態(tài)判斷PC和手機瀏覽器實現(xiàn)代碼的相關資料,需要的朋友可以參考下2016-09-09
跟我學習javascript的閉包，這篇文章的目的就是讓大家對javascript閉包有一個非常全面的了解，感興趣的小伙伴們可以參考一下。2015-11-11
利用TypeScript從字符串字面量類型提取參數(shù)類型
這篇文章主要介紹了利用TypeScript從字符串字面量類型提取參數(shù)類型，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
boostrap模態(tài)框二次彈出清空原有內(nèi)容的方法
今天小編就為大家分享一篇boostrap模態(tài)框二次彈出清空原有內(nèi)容的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
如果對javascript了解不是特別深入的話,很容易就會寫出不兼容的代碼(就像我),這時候就得判斷瀏覽器了。比如事件偵聽、一些鼠標和鍵盤事件、Range等,一些都會不一樣.下面列出幾種常用的檢測瀏覽器方法，以饗觀眾!2009-09-09
這篇文章主要介紹了javascript 緩沖運動框架的實現(xiàn)的相關資料,希望通過本能幫助到大家，實現(xiàn)這樣類似的功能，需要的朋友可以參考下2017-09-09
JS及JQuery對Html內(nèi)容編碼,Html轉義
本文主要介紹了JS及JQuery對Html內(nèi)容編碼,Html轉義的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了javascript性能優(yōu)化之事件委托用法,結合實例形式對比分析了JavaScript中事件委托的具體用法與優(yōu)點,需要的朋友可以參考下2015-12-12
在前端開發(fā)中，我們經(jīng)常需要在不同的組件或類之間共享功能代碼，Mixin提供了一種非常靈活的方式，可以讓我們在不破壞繼承關系的前提下，將功能代碼復用到多個對象中，文章通過代碼示例介紹mixin提升代碼復用性的方法和好處,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Uniapp?實現(xiàn)全民分銷功能,本篇文章主要介紹全民分銷功能實現(xiàn)原理，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-06-06