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ā)生了錯誤，控制就會轉(zhuǎn)移到位于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塊里到此結(jié)束，不會在執(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會是什么結(jié)果？ （下邊的報錯信息肯定不會拋出了，當(dāng)然return必須是在函數(shù)里）
throw new Error("try2"); //試想一下，如何把此句代碼放在下邊的finally里會怎么輸出？（結(jié)果一樣）
}
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 無法捕獲異步任務(wù)異常
2.5.1. 異步任務(wù)->宏任務(wù)setTimeout
try {
setTimeout(()=>{
throw new Error('錯誤信息')
}, 1000);
} catch (err) {
alert( "alert不會執(zhí)行" );
}
因為
try...catch包裹了計劃要執(zhí)行的函數(shù)，該函數(shù)有延遲，這時js引擎已經(jīng)離開了try...catch結(jié)構(gòu)，也就是上下文環(huán)境已經(jīng)改變，所以無法捕獲異步任務(wù)里的錯誤。為了捕獲到計劃的函數(shù)中的異常，那么try...catch必須在這個setTimeout函數(shù)內(nèi)，如下
setTimeout(() => {
try {
throw new Error("錯誤信息");
} catch (err) {
alert("alert會執(zhí)行");
}
}, 1000);
2.5.2. 異步任務(wù)->微任務(wù)promise
try...catch也不會捕獲微任務(wù)的異常，道理同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í)行，所以可以進(jìn)行異常捕獲
// 例子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捕獲同步、異步錯誤。 - 這些是局部錯誤捕獲手段，當(dāng)我們無法保證所有代碼都處理了異常時，可以進(jìn)行全局異常監(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("錯誤信息");
});總結(jié)
到此這篇關(guān)于JS try catch用法舉例之異常處理的文章就介紹到這了,更多相關(guān)JS try catch異常處理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序數(shù)據(jù)監(jiān)聽器使用實例詳解
這篇文章主要介紹了微信小程序數(shù)據(jù)監(jiān)聽器使用實例，數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作。它的作用類似于vue中的watch偵聽器2023-04-04
本文介紹了javascript中你所不知道的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
BootStrap daterangepicker 雙日歷控件
這篇文章主要介紹了BootStrap daterangepicker 雙日歷控件,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了Javascript?動態(tài)樣式控制方法。文章總結(jié)了兩個方法使用style屬性來設(shè)置和定義好類選擇器的樣式,通過元素的ClassName屬性來設(shè)置其Class屬性值,需要的朋友可以參考一下2022-03-03
考試頁面可以實現(xiàn)隱藏左邊的考生信息部分，學(xué)了javascript后也能實現(xiàn)這個功能了，下面是實現(xiàn)思路、代碼及解效果截圖，喜歡的朋友們可以看看2014-10-10
這篇文章主要介紹了TypeScript如何開啟嚴(yán)格空值檢查，文章圍繞TypeScript的相關(guān)資料展開詳情內(nèi)容，需要的小伙伴可以參考一下2022-03-03
JavaScript中的????和?||?有那些區(qū)別詳解
||運算符用于邏輯判斷,返回第一個為真的操作數(shù),而 ?? 運算符用于空值合并,返回第一個非空的操作數(shù),這篇文章主要介紹了JavaScript中的????和?||?有那些區(qū)別的相關(guān)資料,需要的朋友可以參考下2025-07-07
JS實現(xiàn)自動輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動)
這篇文章主要介紹了JS實現(xiàn)自動輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動),需要的朋友可以參考下2017-06-06
可以針對校驗狀態(tài)為輸入框添加額外的圖標(biāo)。接下來通過本文給大家分享bootstrap中添加額外的圖標(biāo)實例代碼，需要的的朋友參考下吧2017-02-02
javascript時間排序算法實現(xiàn)活動秒殺倒計時效果
這篇文章主要介紹了javascript時間排序算法實現(xiàn)活動秒殺倒計時效果，即一個頁面多個倒計時排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03