【JavaScript】js报错处理throw、try和catch

yellow代码人

于 2024-03-30 08:41:24 发布

阅读量582

点赞数 17

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52902052/article/details/137162973

版权

try 语句是测试代码块的错误；catch语句处理错误。throw是主动抛出异常（自定义错误）；除此之外还有 finally语句在try和catch语句之后，无论是否有异常，该语句都会执行。

JavaScript错误

那么javascript引擎执行代码的时候，会发生的各种错误，可能是语法错误（通常是程序员造成的编码或者错别字）；可能是拼写错误或语言中缺少的功能（浏览器差异）；也可能是来自服务器或者用户的错误输出而导致的错误。还有其他许多不可预知的因素导致的错误。

JavaScript抛出（throw）错误

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。描述这种情况的技术术语是：JavaScript 将抛出一个错误。

JavaScript try和catch

try 语句允许我们定义在执行时进行错误测试的代码块；catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块；JavaScript 语句 try 和 catch 是成对出现的。

模拟错误：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="查看消息" onclick="person()">
    <script src="./throwjs.js"></script>
</body>
</html>

var name1 = 'Tom'
function person() {
    try {
        // 被检测的代码，如果有错误，错误结果就会在catch中处理
        adddlert('Hello,Tom');   //  这是一个错误的方法
    } catch (error) {
        name1 = '出错了。'
        console.log(error.message,'错误信息');   //adddlert is not defined
        alert(name1);
    }  
}

Throw语句

throw语句允许我们创建自定义错误

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

后面有实例

JavaScript finally语句

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块（相当于一个兜底的代码）。

直接来看实例，这个实例简单还原一下表单验证的原理（如果有开发过表单提交验证的可以用这个封装自己的表单验证）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>请输入5~10之间的数字</p>
    <input type="text" id="demo">
    <button type="button" onclick="demo()">点我</button>
    <!-- 用来放错误信息的 -->
    <p id="content"></p>
</body>
<script src="./voild.js"></script>
</html>

function demo() {
    var message, val;
    message = document.getElementById('content');
    message.innerHTML = "";
    val = document.getElementById('demo').value;
    try {
        // 如果输入的值为空
        if (val == '') throw '请输入';
        if (isNaN(val)) throw '请输入数字'
        val = Number(val);  //转成数字
        if (val > 10) {
            throw '请输入值为5~10的数字'
        }
        if (val < 5) {
            throw '请输入值为5~10的数字'
        }
    } catch (error) {
        // 检测try代码块中的错误信息
        message.innerHTML = '错误：' + error + '.';
    } finally {
        // 兜底，只要点了就把输入框的值设置为空
        document.getElementById('demo').value = ''

    }
}

大家都可以是一个粘一下代码，看一下代码的运行结果；

yellow代码人

关注

17
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript】js报错处理throw、try和catch

那么javascript引擎执行代码的时候，会发生的各种错误，可能是语法错误（通常是程序员造成的编码或者错别字）；当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块（相当于一个兜底的代码）。直接来看实例，这个实例简单还原一下表单验证的原理（如果有开发过表单提交验证的可以用这个封装自己的表单验证）语句允许我们定义当 try 代码块发生错误时，所执行的代码块；语句是测试代码块的错误；
复制链接

扫一扫