JavaScript 错误处理

2023-11-16

错误处理

一、What? 什么是错误处理

错误是指导致系统不能按照用户意图工作的一切原因、事件。在程序设计过程中,由于某些错误的存在,致使程序无法正常运行,处理这些错误以使程序正确运行就称为错误处理。错误处理功能是衡量编译器性能的重要方面,它在帮助程序员尽快修改程序方面起到了非常重要的作用

二、Why? 为什么需要错误处理

程序出现错误,将停止运行,这对于一个后台服务来说是致命的(在服务器上的服务是需要24小时一直运行的)。为了保证程序的健壮性与容错性,即在遇到错误时程序不会崩溃,我们需要对异常进行处理

三、How? 怎么做

(1) try、catch、finally语句

ECMA-262(JS的核心语法标准)的第三版,引入该语法:

try {
    //可能导致错误的代码
}catch(e) { //捕获的错误对象
    //捕获错误之后的处理代码
}finally {
    //执行完所有代码必须做的一些事情,拦截try、catch的结束
}

(2) 语法

1. try不能单独并且要最先出现,其后必须紧跟catch或者finally从句不然语法错误,并且JS不支持多catch从句

可以这么写:

try {

}finally(e) {
    
}

或者:

try {

}catch(e) {
    if(e instanceof ***) { 
        //是这种错误的时候执行什么
    }else if(e instanceof ***) {

    }
}

但是你不能这么写:

try {

}
//OR
catch(e) {

}
//OR
finally{

}

或者:

//java的异常错误处理不能多层catch,只支持一层的catch
try {

}catch(e) {

}catch(e) {

}
2. catch语句的错误对象一定要声明,它属于语法的一部分,即使你不需要,不然发生语法错误

可以这么写:

try {

}catch(errorReason) {//错误对象的参数名可以任意,但是一定要有

}
3. finally的强制打断机制,finally一旦出现,try和catch的return语句会失效

看一段代码:

function getCount(){
    let count = 0
    try {
        count++
        console.log(count, 'try 语句的count')
        return count
        count++
        console.log(count, 'try 语句的count')
    }catch(e) {
        count++
        return count
        count++
        console.log(count, 'catch 语句的count')
    }finally {
        console.log(count, 'finally 语句的count')
        return count
    }
}
const count = getCount()

分析结果 =>

  • 当finally上层的代码(try和catch)按照逻辑执行,但是一旦遇到return,会忽略当前语句块剩余代码,并跳转执行finally的代码
  • 执行finally代码时,如果遇到return语句,当前函数的返回值重新赋值为当前语句表达式结果;如果没有遇到,依然执行完成所以代码,但是返回值为之前的return的表达式的值

四、错误类型

内置错误类型(构造函数):

  • Error 错误基类
  • ReferenceError 引用错误(使用空指针)
  • SyntaError 语法错误
  • TypeError 类型错误 (类型和操作符不匹配,例如不是函数却调用)
  • RangeError 超出范围、内存空间调用超过最大值
  • URLError、EvalError 极少使用,根据名称就知道作用,我就不说明了

对于这些内置的错误类型的实例,浏览器能够对其识别并进行一些处理,当然也有记录错误位置的作用,这使得开发人员易于调试。

Error 语法

通过Error的构造器可以创建一个错误对象。当运行时错误产生时,Error的实例对象会被抛出。Error对象也可用于用户自定义的异常的基础对象

new Error([message[, fileName[,lineNumber]]])
  • message
    可选。可阅读的错误描述信息。
  • fileName
    可选。被创建的Error对象的fileName属性值。默认是调用Error构造器代码所在的文件 的名字。
  • lineNumber
    可选。被创建的Error对象的lineNumber属性值。默认是调用Error构造器代码所在的文件的行号。

Error的prototype上有两个重要的属性:

  • name 错误类型
  • message 错误信息
  • stack 错误栈信息,比message保存的多 => 错误类型、错误信息、错误代码位置(出错所在函数,一直向上直到全局环境)

Error是所以其它内置错误类型的基类

五、抛出错误异常

前面讲了catch(e) 捕获异常语句块,现在我们要讲一讲抛出异常

(1)了解基本

  1. What? 什么是抛出异常
    提示解析器该处语句存在开发者意料之内的异常,希望阻塞停止继续执行代码,以免造成难以弥补的错误。

  2. Why? 为什么需要抛出

    • 抛出异常能比console.log等打印输出函数获得更多的信息提示,便于调试

    • 对一些自定义封装,对于用户来说是透明的,用户的自由度极高,极有可能引发错误,当用户不合理的使用API语法时,抛出错误让用户感知就显得极为重要。例如Vue、React库等都对异常做了很多的处理

  3. How? 怎么抛出
    关键词:throw + 数据(错误原因)
    值得注意的是,数据没有要求是什么类型,只要是一个结果即右值即可。这
    意味着:

    throw ''
    throw 1
    throw true
    throw undefined
    throw null
    throw [1, 2]
    throw function() {console.log('抛出的错误函数')}
    throw {}
    

    这些都是可以的,
    而错误原因一般大家都叫error,因此在try-catch语句一般这么写:

    try {
        let error //error可以是任何的数据类型
        throw error
    }catch(error) { //这个error就是上面代码抛出的error的值
        console.log(error)
    }
    

    catch捕获的错误error就是上面代码抛出的error的值(不考虑代码错误的情况下)

    let error = {a: '1'}
    try {
        throw error
    }catch(e) {
        console.log(e, e === error)//{a: '1'} truw
    }
    
  4. assert,ECMA没有规定,但是可以自己简单实现
    语法:

    function assert (condition, message) {
        if(!condition) {
            throw new Error(message)
        }
    }
    

六、实战应用

  • 函数封装
  • 错误检测
  • 通信异常捕获和传递

(1) 函数封装 和 错误检测

检测参数类型,前面说过直接面对API的开发人员无法知晓内部实现,一旦发生使用错误应该抛出异常,例如

function concat(...strArr) {
    let result = ''
    for(let str of strArr) {
        if(str) {
            result += str
        }
    }
    return result
}

上面函数存在问题就是 if 判断是,发生的类型转换,如果传入的是 0、undefined、null 他们转换为字符串不为空值,这将导致结果与预期不一致。可以做出如下修改:

function concat(...strArr) {
    let result = ''
    for(let [str, index] of strArr.entries()) {
        if(typeof str === 'string') {
            result += str
        }else {
            throw new Error('第' + index + '传入的参数不是string类型')
        }
    }
    return result
}

确保连接的只是字符串

(2) 通信异常捕获和传递 <=> ajax + promise => axios

try {
    $.ajax({...config})
}catch(error) {
    console.log(error) // 网络资源请求错误
}

七、总结

在实际的开发中最好定义自己的错误类型,主要代码更加健壮,其次便于调试

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 错误处理 的相关文章

  • 下划线 where 或条件(下划线、lodash 或任何其他解决方案)

    我实现了一个混合来添加 或 条件与 where var arr a 1 b 4 a 5 a 6 a 11 mixin or function obj arr condition return chain arr where conditio
  • javascript Array.prototype.push 如何连接

    我已经看到数组的 push 方法用于替换串联 但我不完全确定它是如何工作的 var a 1 2 3 var b 4 5 6 Array prototype push apply a b 它如何就地连接而不是返回一个新数组 apply htt
  • 无限水平滚动 Div

    我需要一个 div 当您将鼠标进一步向右或向左移动时 它会水平滚动 我发现 Smooth Div Scroll 插件 http www smoothdivscroll com 非常接近我的需要 然而 这存在一些问题 我需要能够使滚动元素从设
  • 为什么用 < 对 JS 数字数组进行排序有效?

    在 JavaScript 中对数字数组进行排序时 我不小心使用了 lt 代替通常 https stackoverflow com questions 1063007 how to sort an array of integers corr
  • 如何将 CAD (DWG) 文件转换为 GeoJSON?

    我正在使用 OpenLayers 需要将 DWG 文件转换为 GeoJSON 格式 我怎样才能做到这一点 事实上 GDAL 拥有完成此任务所需的工具 ogr2ogr 是 GDAL 中包含的一个程序 可以转换多种格式 https gdal o
  • 将 C# 3D 数组移植到 JS 3D 数组

    我开发了一个 C 库 它在 3 个项目中使用 这些项目在特定的代码段中中继 不过 我仍然需要在 javascript 中使用该代码 所以将其导出 问题是 我认为我无法复制同样的逻辑 比如这个问题我想了好几天也没有得出答案 在 C 库中 我有
  • 获得焦点时如何移动文本框视口?

    我有一个文本框 其中可能包含大于文本框大小的字符串 当我打字时 文本框 视口 总是移动以显示我输入的最后一个字符 例如 当您在 SO 问题中写下一个非常大的标题时 A 问题是 如果文本框失去焦点 当它再次聚焦时 视口总是设置在文本的开头 而
  • firebug 打开后断点重复触发

    当我在一个站点上打开 firebug 时 我无法分析任何内容 因为每隔几秒就会在该行上触发一个断点 function function a try function b i if i i length 1 i 20 0 function c
  • jQuery:在 jQuery 对象中存储附加/额外的数据/信息?

    在 jQuery 对象中存储额外的数据是否可能且明智 现在我有包含一些数据的对象 但这些对象也有该数据的视觉表示 这可行 但我有很多代码来保持它们同步 例如 如果您从 dom 中删除一个对象 我还必须从对象数组中删除相关对象 删除相当简单
  • Google Analytics 服务器端授权获取页面浏览计数分析数据并将其显示在首页上的随机访问者

    如何显示您网页的访问者计数 而无需像 Google Analytics 那样登录或进行身份验证 我正在尝试实施 Google Analytics 服务器端授权来获取页面浏览计数分析数据并将其显示给首页上的随机访问者 我阅读了他们的文档并找到
  • 为什么 jQuery 的 .change() 事件仅在单击鼠标右键时触发?

    我在使用 jquery 时遇到了问题 change 当我修改输入元素时发生事件 据说 每当我对所述元素进行实时更改时 该事件就会触发 但就我而言 它仅在我按下右键单击按钮后才会触发 这是我的代码laravel框架 HTML div clas
  • 解密签名并验证 JWT

    我知道还有其他库可以让我更轻松地使用 JWT 在 Node js 中 在本例中 我使用 crypto js 以手动方式学习 JWT 以下给了我令牌 var header alg HS256 typ JWT var wordArrayHead
  • Django CBV表单提交返回的JSON显示为新页面

    我正在使用 Django 3 2 我正在创建一个简单的时事通讯订阅表格 表单提交将 JSON 返回到前端 然后应该使用前端来更新页面的部分内容 但是 当我发布表单时 JSON 字符串将在新页面上显示为文本 这是调用视图的路由 urlpatt
  • 将 Blob 设置为 iframe 的“src”

    以下代码在 Chrome 中完美运行 但它不适用于 IE 有人可以告诉我这里出了什么问题吗 iframe src 也设置为 blob 如下所示
  • this 关键字是构造函数中的窗口对象

    好吧 所以我以为我理解了这一点 没有双关语的意思 但显然不是 var Constructor function var internalFunction function return this window this myMethod f
  • Internet Explorer 10,最大 div 大小为 1.533.917 像素

    我需要制作一个非常大的 div 以百万像素为单位 搜索我发现这个线程证明 IE 可以管理最多 10 000 000 px 确定最大可能的 DIV 高度 https stackoverflow com questions 7719273 de
  • 如何沿着 Parse Promise 链传递额外数据[重复]

    这个问题在这里已经有答案了 在我的 Parse Cloude 代码中 我需要运行几个连续的查询 每个查询都使用 find Example var promise firstQuery get objectId then function r
  • javascript:新日期,缺少年份

    我打电话给 new Date Jan 4 发现默认年份是2001年 a new Date Jan 4 Thu Jan 04 2001 00 00 00 GMT 0500 EST 有什么办法可以将默认年份设置为 2011 年吗 更新 我知道我
  • 在不调用“then”的情况下解决 Promise

    我有这段代码 它是我为一个名为 Poolio 的 NPM 模块编写的小型 API 的一部分 对于那些支持错误优先回调和承诺的人来说 我遇到的问题似乎是一个常见问题 我们如何在支持两者的同时保持一致的 API 和 API 的一致返回值 例如
  • Apollo 服务器,Graphql - 必须提供查询字符串

    我不确定我在这里做错了什么 我现在已经被困了一段时间 让我的突变在无服务器设置中与我的 apollo server lambda 一起运行 当我尝试运行这样的查询时 我的查询工作正常 mutation signIn username Som

随机推荐

  • matlab画一个正弦函数y=sin(x)(全网最简便,没有之一)

    本博日常打卡 x 0 pi 100 2 pi y sin x plot x y plottools 说明 plottools on 按照您上次使用时的布局在当前图窗上显示图窗选项板 绘图浏览器和属性编辑器 不带参数的 plottools 与
  • live reload enabled是什么意思_老外说“Pigheaded”什么意思?猪头三?才不是

    最近 猪肉价格 一路飞涨 老妈买完菜 每天都在唠唠叨叨 今天排骨又涨了xx块钱 五花肉又涨了xx 邻居家长里短 聊得都是 猪肉 简直像小猪佩奇花一亿买了 小区热搜榜 似的 所以 小编就想着倒腾一篇 猪猪 相关的英语知识 分享给大家 咳咳 蹭
  • 初级5 题目一 认识哈希函数和哈希表

    1 哈希函数的定义及性质 1 哈希函数是函数 所以接收一个变量 返回一个值 接收的变量 其定义域理论上是无穷大 返回的值是哈希值 也就是每个变量都能生成对应的哈希值 2 哈希函数的值域是有穷的 哈希值有穷个 并非无穷大 哈希函数相当于把无穷
  • 作用域&内存空间

    作用域 C 语言编译器可以确认 4 种不同类型的作用域 代码块作用域 文件作用域 原型作用域和函数作用域 文件作用域 全局变量 函数名 链接属性 简单的来说 编译器将你的源文件变成可执行程序需要经过两个步骤 编译和链接 编译过程主要是将你写
  • nginx基本介绍(安装、常用命令、反向代理)

    文章目录 引言 一 nginx是什么 二 nginx的下载和安装 1 下载 2 windows下安装 3 运行 4 外部服务器无法访问问题 三 nginx的常用命令 四 nginx config 五 FileZilla 1 什么是FileZ
  • 数字证书 X509详解 && python解析SSL证书

    数字证书 数字证书就是互联网通讯中标志通讯各方身份信息的一系列数据 提供了一种在Internet上验证您身份的方式 其作用类似于司机的驾驶执照或日常生活中的身份证 它是由一个由权威机构 CA机构 又称为证书授权 Certificate Au
  • C++模板实参类型推导

    1 什么是模板 C 特性之一 批量生成代码的手段 2 模板有什么应用 1 泛型编程 例如 std vector 2 模板元编程 利用模板的特化等特性 在编译期计算出结果 例如 3 模板实参类型推导 虽然模板这么牛逼 但是今天我们不讲上述两个
  • 【华为OD统一考试B卷

    在线OJ 已购买本专栏用户 请私信博主开通账号 在线刷题 运行出现 Runtime Error 0Aborted 请忽略 华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一
  • 解决pip更新问题.WARNING: You are using pip version 19.2.3, however version 20.2.1 is available.

    一开始遇到这个问题在网上找了很多发现解决不了问题的根本 一开始我以为是网络的问题 后来一直是这样 然后有大佬告诉我你可能python版本太高了 他说卸载了换3 7的 3 8的很多功能都用不了 不过这样是很麻烦的 因为之前也安装了一些库 如果
  • 云服务器上Wamp搭建网站

    说明 想要在云服务器搭建网站 且需要被外网访问浏览的苦逼程序员可以参考本文 前提是你已经购买好了服务器以及公网IP 近一个月买了3次服务器 使用wamp搭建了3次网站了 本以为最后一次会轻车熟路 但是东搞西搞还是花了1个多小时 看来还是要把
  • (附源码)python+mysql+基于协同过滤算法的书籍推荐 毕业设计101555

    摘 要 21世纪的今天 随着社会的不断发展与进步 人们对于信息科学化的认识 已由低层次向高层次发展 由原来的感性认识向理性认识提高 管理工作的重要性已逐渐被人们所认识 科学化的管理 使信息存储达到准确 快速 完善 并能提高工作管理效率 促进
  • “晓白”学python-科普篇(3)-那些和python相关的岗位之python-web开发工程师

    老袁啊 python有这么广泛的应用 那我学好python能不能找到一份和python相关的工作呢 晓白问道 老袁听了回答道 你这个问题太笼统了 实际上你想问的是两个问题 一个就是那个工作岗位和python是相关的 第二个就是这些工作岗位对
  • nginx 正向代理 配置 http 和 https

    nginx 正向代理 配置 http 和 https 应用场景 同学A 所在公司对外网有所限制 借助云服务器nginx正向代理 实现正常浏览公网资料 服务端 云服务器 安装nginx cd usr local wget http nginx
  • Vue3内置组件teleport详解

    teleport的作用 该组件可以将指定内容渲染到特定容器中 而不受 DOM 层级的限制应用场景 当蒙层内容在一个组件中时 蒙层内容是无法遮挡住全部内容的 因此 需要使用teleport将蒙层内容渲染到更全局的组件中 如果不使用telepo
  • python入门(二)——数据类型

    目录 一 数字类型 二 字符串 例题1 凯撒密码 例题2 星号三角形 三 time模块 人家说合格的程序员要养成经常写博客的习惯 嗯 我正在培养中 日积月累 希望自己能坚持下去 一 数字类型 1 整数 与往常的C C 等语言的不同是 pyt
  • python为什么没有指针_Python的指针:有什么意义?

    Python部落 python freelycode com 组织翻译 禁止转载 欢迎转发 目录为什么Python没有指针 Python中的对象 不可变对象和可变对象 了解变量C的变量 Python的名称 关于Python的预实现对象的注释
  • slect( )、poll( )、epoll( )函数详解

    1 slect 函数 1 1 函数原型 include
  • QT 手动建立 带参数的信号槽

    在QT中 如果直接使用UI 在控件上点击槽函数自动建立信号槽及槽函数是非常方便的 但是 有时候 我们会采用全代码 动态建立窗口和控件 这个时候就需要手动方式来建立控件的槽函数 方法如下 1 首先在window h头文件中添加 public
  • Java中多态的实现机制

    多态性是面向对象程序设计代码重用的一个重要机制 我们曾不只一次的提到Java多态性 在Java运行时多态性 继承和接口的实现一文中 我们曾详细介绍了Java实现运行时多态性的动态方法调度 今天我们再次深入Java核心 一起学习Java中多态
  • JavaScript 错误处理

    错误处理 一 What 什么是错误处理 错误是指导致系统不能按照用户意图工作的一切原因 事件 在程序设计过程中 由于某些错误的存在 致使程序无法正常运行 处理这些错误以使程序正确运行就称为错误处理 错误处理功能是衡量编译器性能的重要方面 它