关于javascript try-catch的理解

        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 异步错误处理的更多细节及应用。如果需要修改或调整结尾内容,请告知我。谢谢!