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 {
  // 需要被执行的语句
} 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异常处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js中apply和Math.max()函数的问题及区别介绍

    js中apply和Math.max()函数的问题及区别介绍

    这篇文章主要介绍了js中apply和Math.max()函数的问题,本文给大家带来两种答案,每一种答案给大家介绍的非常详细,在文章底部给大家提到了js中Math.max.apply和Math.max的区别,感兴趣的朋友一起看看吧
    2018-03-03
  • 概述一个页面从输入URL到页面加载完的过程

    概述一个页面从输入URL到页面加载完的过程

    本文主要对一个页面从输入 URL 到页面加载完的过程中都发生了什么事情进行概述,对我们学习网络语言有一定的帮助,下面就跟小编一起来看下吧
    2016-12-12
  • Javascript 浮点运算精度问题分析与解决

    Javascript 浮点运算精度问题分析与解决

    浮点数的精度问题不是JavaScript特有的,因为有些小数以二进制表示位数是无穷的
    2014-03-03
  • js去掉数组中undefined及空字符串、null两种方法例子

    js去掉数组中undefined及空字符串、null两种方法例子

    这篇文章主要给大家介绍了关于js去掉数组中undefined及空字符串、null的两种方法例子,文中还介绍了undefined与null之间的区别,通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • 微信小程序实现裁剪图片大小

    微信小程序实现裁剪图片大小

    这篇文章主要为大家详细介绍了微信小程序实现裁剪图片大小,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • js的函数的按值传递参数(实例讲解)

    js的函数的按值传递参数(实例讲解)

    下面小编就为大家分享一篇js的函数的按值传递参数的实例,具有很好的参考价值,一起跟随小编过来看看吧,希望对大家有所帮助
    2017-11-11
  • 使用javaScript动态加载Js文件和Css文件

    使用javaScript动态加载Js文件和Css文件

    这篇文章主要介绍了如何使用javaScript动态加载Js文件和Css文件
    2015-10-10
  • JavaScript弹出框与事件绑定的超详细解析

    JavaScript弹出框与事件绑定的超详细解析

    这篇文章主要介绍了JavaScript弹出框与事件绑定的相关资料,通过示例讲解了实现方式、综合应用及最佳实践,如避免内存泄漏、优化性能、提升用户体验与可访问性,需要的朋友可以参考下
    2025-05-05
  • JS 强制设为首页的代码

    JS 强制设为首页的代码

    把网站设置为浏览器的首页是我们做网站时经常加到网站顶部的功能!下面这段代码是强制设置为首页的代码!最好别用啊!呵呵!
    2009-01-01
  • js简单粗暴的发布订阅示例代码

    js简单粗暴的发布订阅示例代码

    这篇文章主要给大家介绍了js简单粗暴的发布订阅的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论