JavaScript-throw、try...catch以及解析xml文档（基础篇）

最新推荐文章于 2024-03-30 08:41:24 发布

可可鸭~

最新推荐文章于 2024-03-30 08:41:24 发布

阅读量880

点赞数

分类专栏： JavaScript学习文章标签： javascript xml 前端

本文链接：https://blog.csdn.net/qq_43547255/article/details/121761507

版权

JavaScript学习专栏收录该内容

26 篇文章 4 订阅

订阅专栏

JavaScript-throw、try、catch以及xml初识、在js中基本使用

一、throw、try、catch基本使用

一般情况下，如果程序出现错误，那么从出现错误的地方开始，之后的代码都不会被执行。但有时候我们希望即使在出现错误后，程序仍需要继续运行。那么异常处理就显得十分重要了。

关键字
throw：抛出一个自定义错误信息。
try：在执行时进行错误测试的代码块。
catch：当 try 代码块发生错误时，所执行的代码块。
finally：在 try 和 catch 之后无论有无异常都会执行。

1.try…catch
举例1

try {
  console.log(num);
} catch  (e) {
  console.log(e);} finally {
  console.log('不管是否出错，这里的代码都会执行。');
}

console.log('能执行这行代码吗？');

在这里插入图片描述

因为 try 里面的代码出现了错误，所以执行了 catch 里面的代码。之后又执行了 finally 里面的代码，因为 finally 里写的代码是不管 try 里的代码运行是否出错都会执行的。

举例2

    function abc(){
        console.log("123");
    }
    try{
        cba();
    }catch(e){
        console.log([e])
        console.log(e.message);
        console.log(e.stack)
    }

运行结果
在这里插入图片描述

try：必填
catch：选填
finally：选填

注意：catch 和 finally 都是可以选填。但在使用 try 语句时，catch 和 finally 必须使用其中一个跟着 try 后面。
以上就是普通异常处理的使用方法

2.throw

function children() {
    throw new Error("子报错");
}

function parent() {
    children(); //有异常抛出 函数中断执行
}
parent();
console.log("cccccccc");

运行结果
在这里插入图片描述配合 throw 使用
举例1

function devide(a, b) {
  if(0 === b) { // 分母为0
    // 抛出异常
    throw '分母不能为零!';
  }
  return a/b;
} try {
  // 可能会出现错误的代码
  console.log(devide(10, 0));
} catch(e) {
  // 出现错误后，会抛出自定义的错误
  console.error(e);
}

在这里插入图片描述
举例2

function children() {
    throw new Error("子报错");//Error要大写
}
function parent() {
    //可以在上一层函数捕获下层函数的异常
    try {
        children();
    } catch(error) {
        console.log(error);
    }
}
parent();
console.log("cccccccc");

在这里插入图片描述

/*
throw new Error(error); 这个是创建错误，创造一个错误类型抛出
throw error 这个是抛出错误。
*/

throw error 与 throw new Error(error)区别

throw new Error(error)

在这里插入图片描述 throw error

在这里插入图片描述

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入电话号码">
    <button>提交电话</button>
    <script>
    var input = document.querySelector("input");
    var btn = document.querySelector("button")
    btn.onclick = function(){
        var value = input.value;
        input = parseInt(value);
        try {
        if(isNaN(value)){
            var error = new Error("电话号码不是数值,格式错误！")
            error.type = "geshi_problem"
            throw error
        }else if(value.length!=11){
            var error = new Error("电话号码长度有问题，应该是11位！")
            error.type = "numlength_problem"
            throw error
        }
    } catch (e) {
        console.log([e])
        if(e.type == 'geshi_problem'){
            var h1 = document.createElement("h1");
            h1.innerHTML= "请确保输入正确格式的电话号码"
            document.body.appendChild(h1);
            }  
        }
    }
    </script>
</body>
</html>

在这里插入图片描述

二、xml初识

xml文件是用来做什么的

核心思想：
答：存储数据
延伸问题： xml是怎样存储数据的？
答：以标签的形式存储  
例:  <name>coco</name>

什么是xml元素? 元素该如何编写?

xml中的元素其实就是一个个的标签
标签分为两种，包含标签体和不包含标签体

包含标签体

<student>
   <name>coco</name>
   <age>18</age>
</student>
<!--
    理解: 简括号全部成对儿出现, 所有的数据都用一对儿简括号存储-->

不包含标签体

<student name="coco" age="18"/>
<!--
理解: 只有最外层的一个简括号,括号用/标识结束, 内部的数据都用属性来编写-->

标签(元素的书写规范)

严格区分大小写；<p><P>
只能以字母或下划线开头；abc _abc
不能以xml(或XML、Xml等)开头----W3C保留日后使用；
名称字符之间不能有空格或制表符；
名称字符之间不能使用冒号 : (有特殊用途)
元素中属性的注意事项
一个元素可以有多个属性，每个属性都有它自己的名称和取值。
属性值一定要用引号(单引号或双引号)引起来。
属性名称的命名规范与元素的命名规范相同
元素中的属性是不允许重复的
在XML技术中，标签属性所代表的信息也可以被改成用子元素的形式来描述

<students>
    <student name="coco" age="18" />  
    <student>
        <name>coco</name>
        <age>18</age>
    </student>
</students>

XML的注释

<!—被注释的内容 -- >

xml中常用转义字符(与html中类似)

特殊字符	替代字符
&	&
<	<
>	>
"	"
’	'

<students>
    <student>
        <name>coco</name>
        <url>
            &lt;itheima&gt;www.baidu.com&lt;/itheima&gt;
        </url>
    </student>
</students>

xml中空格会被保留

html中会把多个连续的空格字符剪裁合并为一个
xml文本中空格不会被删节

在这里插入图片描述
运行结果

三、xml基本使用

步骤一
创建一个xml文本

<xiaozhitiao>
<from class="d1">喵喵</from>
<to>旺旺</to>
<content>我想抓走你全部的坏心情</content>
</xiaozhitiao>

步骤二
在自己的地址栏中修改xml的地址名，拿到url

在这里插入图片描述

运行结果在这里插入图片描述
步骤三
利用学过的ajax请求xml数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    function getAjax(httpUrl,callbackFn){
    var xhr = new XMLHttpRequest();
    xhr.open("get",httpUrl);
    xhr.send();
    xhr.onreadystatechange = function(){
        if (xhr.status == 200 && xhr.readyState == 4) {
        }
    };
} 
    var https = 'http://127.0.0.1:5500/js/js%E5%AD%A6%E4%B9%A0/day_16xml.xml';
    getAjax(https,function(xhr){
        console.log(xhr);  
        var str = xhr.responseText;
        var domparse = new DOMParser();
/*
DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法：
*/
        console.log(domparse)
        var xmlDom = domparse.parseFromString(str,'text/xml')
        console.log(xmlDom)
        var content = xmlDom.querySelector("content");
        console.log(content.innerHTML)
    });
    </script>
</body>
</html>

运行结果
在这里插入图片描述

在这里插入图片描述

可可鸭~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-throw、try...catch以及解析xml文档（基础篇）

JavaScript-throw、try、catch以及xml初识、在js中基本使用一、throw、try、catch基本使用一般情况下，如果程序出现错误，那么从出现错误的地方开始，之后的代码都不会被执行。但有时候我们希望即使在出现错误后，程序仍需要继续运行。那么异常处理就显得十分重要了。关键字throw：抛出一个自定义错误信息。try：在执行时进行错误测试的代码块。catch：当 try 代码块发生错误时，所执行的代码块。finally：在 try 和 catch 之后无论有无异常都会
复制链接

扫一扫