JS try catch用法举例之异常处理
作者:扶苏1002
一、语法
try语句包含了由一个或者多个语句组成的try块,和至少一个catch块或者一个finally块的其中一个,或者两个兼有,下面是三种形式的try声明:
try...catch try...finally try...catch...finally
try { // 需要被执行的语句 } catch (err) { // 如果在try块里有异常被抛出时执行的语句 } finally { // 在try语句块之后执行的语句块。无论是否有异常抛出或捕获这些语句都将执行。 }
上述代码中,
try
块中的语句首先被执行。如果运行中发生了错误,控制就会转移到位于catch
块中语句,其中括号中的err
参数被作为例外变量传递。否则,catch
块的语句被跳过不执行。无论是发生错误还是catch
块中的语句执行完毕,或者没有发生任何错误try
块中的语句执行完毕,最后将执行finally
块中的语句。
二、举例
2.1. 无错误情况
try { alert('开始执行 try1'); // (1) alert('开始执行 try2'); // (2) } catch (err) { alert('catch 被忽略,因为没有 error,不会被执行'); // (3) }
上面代码会弹出‘开始执行
try1
’和开始执行try2
,但是不会弹出‘catch
被忽略,因为没有error
2. 2. 有错误情况
try { alert('开始执行 try1'); // (1) throw "此处抛出错误"; //try块里到此结束,不会在执行下边的try2 alert('try2,不会被执行'); // (2) } catch (err) { alert('出现了 error,此句被执行'); // (3) }
上面代码会弹出‘开始执行
try1
’和‘出现了error
,此句被执行’
2.3. try…catch 仅对可以运行的代码有效
要使得
try...catch
能工作,代码必须是可执行的。换句话说,它必须是有效的JavaScript
代码。
如果代码包含语法错误,那么try..catch
将无法正常工作,例如下边代码出现了一行逗号:
try { ,,,,,,//js引擎无法理解这段代码,它是无效的 throw "此处不会抛出错误"; //不会执行 alert('try2,此句不会被执行'); // (2) } catch (err) { alert('此句不会被执行'); // (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必须是在函数里) 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); //不会被执行 } 会输出 // inner try1 // finally
2.5. try…catch 无法捕获异步任务异常
2.5.1. 异步任务->宏任务setTimeout
try { setTimeout(()=>{ throw new Error('错误信息') }, 1000); } catch (err) { alert( "alert不会执行" ); }
因为
try...catch
包裹了计划要执行的函数,该函数有延迟,这时js
引擎已经离开了try...catch
结构,也就是上下文环境已经改变,所以无法捕获异步任务里的错误。为了捕获到计划的函数中的异常,那么try...catch
必须在这个setTimeout
函数内,如下
setTimeout(() => { try { throw new Error("错误信息"); } catch (err) { alert("alert会执行"); } }, 1000);
2.5.2. 异步任务->微任务promise
try...catch
也不会捕获微任务的异常,道理同2.5.1
这2段代码try,catch
都不会捕获到错误信息,因为promise
内部的错误不会冒泡出来,而是被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
可以让异步代码同步执行,所以可以进行异常捕获
// 例子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. 全局监听抛出的错误
- 以上所有异常,仅通过
try catch、then
捕获同步、异步错误。 - 这些是局部错误捕获手段,当我们无法保证所有代码都处理了异常时,可以进行全局异常监控
一般有两种方法:
- window.addEventListener(‘error’)
- window.addEventListener(‘unhandledrejection’)
- error 可以监听所有同步、异步的运行时错误,但无法监听语法、接口、资源加载错误。
- 而 unhandledrejection 可以监听到 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异常处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!