网站icp备案号是如何编制的全国最好的广告公司加盟
try-catch 是 JavaScript 处理错误的一种重要机制。try 块用来包含可能会出错的代码,catch 块用来处理 try 块中的错误。使用 try-catch 的主要目的是在代码出错时不会导致整个程序崩溃,可以让错误被妥善处理。一个典型的 try-catch 代码块如下:
try {// 可能出错的代码
} catch (error) {// 出错时的处理代码
}当 try 块中的代码执行出错时,会触发 catch 块来捕获这个错误。catch 块会接收到一个 Error 对象,包含了错误的名称、消息和堆栈信息。我们可以通过这个 Error 对象来分析错误原因,也可以针对不同的错误进行不同处理。相比于没有错误处理导致程序崩溃的情况,使用 try-catch 可以让我们的程序在应对错误时更加健壮。它是 JavaScript 语言中非常重要的一个机制。掌握 try-catch 的使用可以大大提高我们开发应用的能力。 但是try-catch并不像表面上的这么简单，熟练的使用try-catch并不是一件简单的事情，下面就让我们来探索一下try-catch的特性。
让我们打开mozilla官网，搜索try-catch，看官网的第一句描述
来，让我们把重点用红圈圈起来
注意，是尝试的语句块，这点很重要，知道这一点才能真正的理解如何使用try-catch，下面给大家展开讲一讲。
<script>try {function error(params) {console.log(a);}} catch (error) {console.log('error', error);}error()
</script>代码如上，我写了一个try-catch语句，然后在try中创建了一个函数，输出一个并不存在的变量a，按理来说这里一定会报错的， 报错就会被catch接住，所以日志里的输出应该是这样
但是事实却是
为什么这里的错误没有被catch接住呢？
因为在try代码块中,仅仅是定义了一个函数error(),这个步骤不会产生错误。真正导致错误的代码是error()函数的调用,也就是试图读取变量a的操作。但是这个操作是在try代码块之外执行的。由于错误发生在try之外,所以不会被catch语句捕获。catch语句只能捕获在try代码块内发生的错误。对于try块外的错误,catch无法捕获到。
总结一下:
1. try块内只定义了函数,不会产生错误。
2. 真正的错误发生在try块外调用函数时。
3. catch语句只能捕获try块内发生的错误。
4. 由于错误发生在try块外,所以catch未能捕获到。
所以如果真的需要捕获到error函数里的错误的话，就需要这样写
好的，讲完这些我们就可以进行下一步理解，现在我们代码如下
<script>try {setTimeout(() => {console.log(a);}, 1000);} catch (error) {console.log('error',error);}
</script>肯定会有人说，这里会报错的代码就写在try里，肯定可以接住报错了吧？事实上这里的报错也不会被接住
为什么呢？为什么这里的报错不会被接住？其实原因很简单，因为try-catch是同步的，我们仔细的看一眼这个代码都做了什么：
1. 定义了一个try-catch语句块,准备捕获错误。
2. 在try代码块内,设置了一个定时器,在1秒后执行读取变量a的操作。
3. try代码块内没有错误,所以执行完毕,主线程继续执行。
4. 1秒后,定时器触发,执行读取a的操作,此时发生错误。
5. 但是此时已经在try-catch语句块外了,所以错误不会被捕获。
6. 因为定时器是异步执行的,已经脱离了try-catch的同步错误捕获范围。
总结关键点:
try-catch是同步捕获错误的。 定时器引发的错误是异步的,不在try-catch捕获范围。执行离开try-catch块后,不再生效。在try语句运行的时候，其内包裹的代码并没有报错，所以这里的错误不会被捕捉到。
由上可得，想要接住定时器内的报错，需要保证，定时器内部的代码和try-catch语句在同一时间段运行，所以我们可以使用定时器的第三个参数来实现这样一个函数；
<script>setTimeout(error, 1000,() => {console.log(a);});function error(callBack) {try {callBack()} catch (error) {console.log('error', error);}}
</script>
定时器的三个参数，第一个是定时器运行的任务，第二个是多久之后的未来执行，第三个是传入给定时任务的参数，我们在第三个参数里传入我们真正需要运行的任务，然后在error函数里执行，这样就可以保证try-catch语句和定时任务的同时性了。
通过这种方式,我们实现了以下效果:
将定时器要执行的代码抽象为一个独立函数callBack。将callBack函数作为参数,传入定时器的第三个参数。在error函数内,使用try-catch语句引用callBack函数。这样,定时器的任务就在try-catch内运行了,错误能被捕获。
如果你还能坚持读到这里，我真的很感谢你，下面是我的一些碎话，在获得了上面的知识后，我们扩展一下，为什么无法接住promise.then里的报错？很简单，因为同步性的问题，我们在写then方法的时候，真正的报错并没有出现
let pro = new Promise(res => {res(12)})try {pro.then(e => {console.log(a);})} catch (error) {}
如果你看懂了上面的知识点，就会明白这里如果要接住报错，就必须要在then里面写try-catch，就像这样
但是这样就会显得代码过于臃肿，而且如果要做到万无一失的话就要在所有的then回调里写try-catch，那也太麻烦了，所以promise才会有catch方法，就是为了保证代码的易读性；
从代码上来看，catch比在then里写try-catch要优雅太多了 。
通过本文的讨论,我们可以对 JavaScript 的错误处理有一个更全面的理解:
1. try-catch 语句可以捕获同步代码中的运行时错误,但是对于异步回调函数中的错误将无能为力。
2. 异步回调函数的错误需要通过参数传递以及try-catch的嵌套,将其纳入同步代码的错误处理范围中。
3. Promise 的 catch方法可以较为优雅地处理异步函数中的错误。
最后，我还想声明一点，事件回调及老式的异步代码仍需注意通过回调函数的参数以及try-catch的作用域,来保证错误能被正确捕获。
本文讨论的例子可以作为日常开发的参考,也可作为进一步深入理解 JavaScript 异步及错误处理的起点。异步编程已成为前端开发的重要一环,require/async/await 的普及也使异步代码越发常见。期待以后能继续与您讨论 JavaScript 异步错误处理的更多细节及应用。如果需要修改或调整结尾内容,请告知我。谢谢!