JS异常简单处理

　　

　　有时候JS某一处报错会导致整个页面JS的运行出问题，于是想的简单研究一下JS的错误处理机制。更详细的可以自己参考网站研究:   https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Errors

1.两个经常可能出现的错误

1.变量未定义

    <!--异常JS，会导致后面的不能正常运行-->
    <script type="text/javascript">
        alert(b)
        alert("这里是异常后的语句")
    </script>

 

界面报错:

 

 

2.语法错误

<!--2.SyntaxError (语法错误异常) 测试-->
<script>
    alert("sss"ssss"") //SyntaxError
</script>

 

 

界面报错:

 

 2.　　针对上面两个错误进行简单处理(以第一个错误为例子)。。自己感觉JS错误机制特别像Java的异常机制

 1.try...catch... 进行简单处理

    <!--try catch的使用-->
    <script type="text/javascript">
    try{
        alert(b);
        alert("这里是异常后的语句");//发生异常，所以不会执行到这里
    }catch(error){
        alert("发生异常了")
    }
    </script>

 

 

2.try..catch...finally...的使用

    <!--try catch  finally的使用-->
    <script type="text/javascript">
        try {
            alert(b);
            alert("这里是异常后的语句"); //发生异常，所以不会执行到这里
        } catch (error) {
            debugger
            alert("发生异常了")
        } finally {
            alert("无论如何这里都会打印");
        }
    </script>

 

 

3.也可以直接try...finally...进行处理

    <!--try  finally的使用-->
    <script type="text/javascript">
    try{
        alert(b);
        alert("这里是异常后的语句");//发生异常，所以不会执行到这里
    }finally{
        alert("无论如何这里都会打印");
    }
    </script>

 

 

3.常见的错误类型

 JS定义了7种错误类型，如下:

• Error ‰
• EvalError
• RangeError ‰
• ReferenceError ‰
• SyntaxError ‰
• TypeError ‰
• URIError

 

说明：

1. Error类型是基本的错误类型，其他类型都继承自这个类型。
2. EvalError 类型的错误会在使用 eval()函数而发生异常时被抛出
3. TypeError 类型在 JavaScript 中会经常用到，在变量中保存着意外的类型时，或者在访问不存在的 方法时，都会导致这种错误
4. 一般情况，不同的错误，处理方式不一样。

 

例如:

    <!--try catch  finally的使用-->
    <script type="text/javascript">
        try {
            alert(b)
            alert("这里是异常后的语句"); //发生异常，所以不会执行到这里
        } catch (err) {
            alert(err.name)//打印错误类型    ReferenceError
            alert(err.message)//打印错误消息      b is not defined
            if (err instanceof ReferenceError) {
                alert("发生引用异常了")
            } else if (err instanceof SyntaxError) {
                alert("发生语法异常了")
            } else {
                alert("发生其他异常了")
            }
        } finally {
            alert("无论如何这里都会打印");
        }
    </script>

 

 

 

4.巧用throw关键字抛出异常

1.抛出JS内置的错误异常类型

　　例如:

    <script type="text/javascript">
        function testerr() {
            try {
                alert(b)
                alert("这里是异常后的语句"); //发生异常，所以不会执行到这里
            } catch (err) {
                if (err instanceof ReferenceError) {
                    throw new Error("引用异常");
                } else if (err instanceof SyntaxError) {
                    throw new Error("语法异常");
                } else {
                    throw new Error("其他异常");
                }
            } 
        }
        
        try{
            testerr();
        }catch(err){
            alert(err.message)
        }
    </script>

 

 

 会弹出  引用异常。

 

2.抛出自定义的错误异常类型

    <script type="text/javascript">
    /**
     *     自定义异常类
     * @param {Object} name    异常名称
     * @param {Object} message    异常信息
     */
        function MyError(name,message){
            this.name = name;
            this.message = message;
        }
    
        function testerr() {
            try {
                alert(b)
                alert("这里是异常后的语句"); //发生异常，所以不会执行到这里
            } catch (err) {
                if (err instanceof ReferenceError) {
                    throw new MyError("yyyc","引用异常");
                } else if (err instanceof SyntaxError) {
                    throw new MyError("yyyc","语法异常");
                } else {
                    throw new MyError("qtyc","其他异常");
                }
            } 
        }
        
        try{
            testerr();
        }catch(err){
            alert(err.message)
            alert(err.name)
        }
        
    </script>

 

 

结果会弹出  引用异常   yyyc

 

 

 5.项目种使用try...catch...

　　今天在使用amcharts插件的时候快速点击按钮刷新页面的时候报错，估计原因是刷新太快导致插件根据ID获取元素的时候获取不到元素，但是调用innerHtml的时候报错。

　　最后我的解决办法是try...catch...  包住报错的代码，在catch种用console.log打印记录错误信息。

　　

 

 

而且try...catch...结合console.log也可以帮我们排错，每次try...catch...一小块代码，并且cosole.log()错误信息可以定位到出错的代码

　　　　在JS脚本的编写中，console.log也是进行日志记录的一种常用方式，类似于 我们在Java中的Logger进行日志记录，便于我们排错。