全回顾扫盲js之错误处理一-----try-catch、finally

js是松散类型的,而且也不会去验证函数的参数,因此错误只会在代码运行期间出现。当错误发生时,js引擎通常会停止,并抛出错误。

随着VUE使用的越来越多,越来越感觉到了js的错误处理的重要性。在之前,前端只是一个个单独的页面,各种错误让后端自己去搞就可以了。但是随着webapp的使用, js扮演着更多的逻辑处理工作,包含着各种路由的跳转,各个页面之间的数据交换,前后端数据的对接,等等。模块化的开发,nodejs的在前端构建工具的应用让js代码越来越 庞大,一个成套的错误处理思路就必须要清晰起来。当然我不是说之前错误处理不重要,我的意思是,之前还能得过且过,现在必须很认真的对待它了

try-catch语句

try{
    console.log(111)
} catch (error) {
    console.log(error.message)
}

try执行可能出错的语句,当try中任何代码发生错误,就会立即退出并执行catch块。这里要指出的点是,catch的参数是必须的,约定俗成的,我们会给他一个error。这个参数不同浏览器的属性也不尽相同,唯一可以稳定输出出来的就是message, 所以我们还是乖乖的用它吧。来感受一下它的效果。

try {
    var arr = new Array()
    arr.substring(0);
} catch (error) {
    console.log(error.message)
}

这里,substring是string的方法,array没有,所以出现错误,然后走的catch,返回结果如下

finally子句

finally子句为必执行子句,就是不管前面try和catch执行的哪一个,不管执行结果如何,最后都会走一边finally。如下面这个栗子

console.log(test1())    //  3
console.log(test2())    //  0 222 undifined
function test1() {
    try {
        return 1
    } catch (error) {
        return 2
    } finally {
        return 3
    }
}
function test2() {
    try {
        console.log(0)
    } catch (error) {
        console.log(111)
    } finally {
        console.log(222)
    }
}

这里,第一个函数是一个在执行完前面的子句之后,还要再执行一遍finally,所以结果是3。为了看他的执行顺序,我写了第二个函数。先走的try,打印出0,紧接着又走的finally,然后打印出222,由于没有return任何值, 所以后面是个undifined。就是说如果有finally,并不影响前面的子句的执行,只是在最后还会执行一边finally。

错误类型 TypeError、ReferenceError

出现错误之后,我们有时候希望针对不同的错误做不同的处理。错误类型有很多种,EvalError、URIError等等。

try {
    someFunction()
} catch (error) {
    console.log(error)
}

这里我们看到他是一个ReferenceError,即引用类型错误。这时候我们可以针对不同错误做对应的处理

try {
    someFunction()
} catch (error) {
    if(error instanceof ReferenceError) {
        console.log(1)
    } else if (error instanceof TypeError) {
        console.log(2)
    } else {
        console.log(3)
    }
}

这是我们看到,我们可以通过error 的 instanceof来区分错误类型

throw抛错

在遇到throw操作符时,代码会立即停止执行。仅有当try-catch语句捕获到被剖出的值时,代码才会继续执行

try
{
    var x= '';
    if(x==="")    throw "x是空的";
}
catch(err)
{
    console.log(err)
}

当try中抛出错误的时候,catch就会接收到这个错误,并统一进行处理。

随机浏览