一、try...catch
1.在同步任务中
<script>let a = 0;try {//要执行的代码console.log(b);} catch (e) {//如果有错误,执行这里的代码console.log(e); //ReferenceError: b is not defined}</script>
2.在异步任务中
2.1 promise中
<script>new Promise((resolve, reject) => {// 异步操作setTimeout(() => {throw new Error("异步错误");}, 1000);}).catch((error) => {// 捕获并处理错误console.error("Promise 异步错误:", error);});</script>
2.2 async/await中
<script>const fetchData = async () => {try {const response = await fetch("啥也没有");} catch (error) {console.error("fetch 数据时出错:", error); // Error: fetch 数据时出错: TypeError: Failed to fetch}};fetchData();</script>
二、window.onerror
1.简介
window.onerror是一个全局的错误处理函数,它是一个全局属性。
在浏览器环境下,它会在脚本执行过程中遇到未被捕获的运行时错误时被触发,如果一个错误已经被例如try...catch的方式捕获,那么window.onerror不会捕获这个错误。
window.onerror在某些情况下可能无法捕获到所有类型的错误,比如跨域脚本错误或某些特定条件下的加载错误。
2.基本使用
<script>// 定义一个全局错误处理函数window.onerror = function () {console.error(); //Uncaught ReferenceError: nonExistentFunction is not defined};// 测试示例nonExistentFunction(); // 这将触发一个ReferenceError错误</script>
3.让控制台不报错
<script>// 定义一个全局错误处理函数window.onerror = function () {console.log("不用管");return true;};// 测试示例nonExistentFunction(); // 这将触发一个ReferenceError错误</script>
4.参数
<script>window.onerror = function (message, source, lineno, colno, error) {// message:错误信息// source:出错文件// lineno:出错文件的行号// colno:出错文件的列号// error:Error对象console.error("捕获到错误:",message,"在文件",source,"第",lineno,"行,第",colno,"列"); //捕获到错误: Uncaught ReferenceError: nonExistentFunction is not defined 在文件 http://127.0.0.1:5500/getError.html 第 31 行,第 7 列// 根据需要,返回true可以阻止浏览器默认的错误提示信息return false; // 返回false则错误信息会在console中打印};// 测试示例nonExistentFunction(); // 这将触发一个ReferenceError错误</script>
三、window.addEventListener
1.简介
window.addEventListener是JavaScript中用于添加事件监听器的方法。在错误捕获方面,我们可以使用window.addEventListener('error', handler)来监听error事件。用法与window.onerror类似,错误捕获比window.onerror更加全面。
2.用法
<script>window.addEventListener("error", function (event) {// 处理错误的逻辑console.error("捕获到错误:",event.message,"在文件",event.filename,"的第",event.lineno,"行"); //捕获到错误: Uncaught ReferenceError: nonExistentFunction is not defined 在文件 http://127.0.0.1:5500/getError.html 的第 23 行});// 测试示例nonExistentFunction(); // 这将触发一个ReferenceError错误</script>