js异常处理框架（JS基础-错误处理）

JS本身是动态语言，因此人们普遍认为它是一种最难于调试的编程语言脚本出错时，由于没有上下文信息，让人摸不着头脑，ECMAScript 第 3 版致力于解决这个问题，专门引入了try-catch和throw等语句以及一些错误类型，意在让开发人员能够适当地处理错误，提升开发效率，下面我们就来聊聊关于js异常处理框架?接下来我们就一起去了解一下吧!

js异常处理框架

JS本身是动态语言，因此人们普遍认为它是一种最难于调试的编程语言。脚本出错时，由于没有上下文信息，让人摸不着头脑，ECMAScript 第 3 版致力于解决这个问题，专门引入了try-catch和throw等语句以及一些错误类型，意在让开发人员能够适当地处理错误，提升开发效率

浏览器错误提示

IE

发生JS错误时，浏览器左下角会出现一个黄色的图标，双击这个图标，就会看到一个包含错误消息的对话框，其中还包含诸如行号、字符数、错误代码及文件名等相关信息

Firefox & Chrome & Opera

发生JS错误时，浏览器不会给出提示，你必须进入到控制台，查看错误信息。控制台显示错误消息、引发错误的 URL 和错误所在的行号等信息。单击文件名即可以只读方式打开发生错误的脚本，发生错误的代码行会突出显示

Safari

Safari在默认情况下都会隐藏全部JS错误信息，你必须启用开发者菜单才能查看这些信息

错误处理 - 自带语法

try-catch语句

try { // 可能会导致错误的代码 // try块中的任何代码发生了错误，就会立即退出代码执行过程，然后接着执行捕获 // 此时catch块会接收到一个包含错误信息的对象 // throw语句抛出错误信息 throw new Error('error message') } catch(error) { // 在错误发生时怎么处理 console.log(error.message) // message是所以浏览器都支持的属性，推荐使用 // 不同浏览器增加了不同的error属性 - IE 添加了与 message 属性完全相同的 description 属性，还添加了保存 着内部错误数量的number属性 - Firefox添加了fileName、lineNumber和stack(包含栈跟踪信息) 属性 - Safari添加line(表示行号)、sourceId(表示内部错误代码)和sourceURL属性 }

finally

try { // 可能会导致错误的代码 } catch(error) { // 错误处理语句 } finally { // 必定执行语句，不受try & catch操作的影响，最终结果以它为准 }

window.onerror()

// 当JS监控到错误发生的时候触发该方法 注：只要发生错误，无论是不是浏览器生成的，都会触发error事件，并执行这个事件处理 程序。然后，浏览器默认的机制发挥作用，像往常一样显示出错误消息。像下面这样在 事件处理程序中返回false,可以阻止浏览器报告错误的默认行为。 window.onerror = function(message, source, lineno, colno, error) { console.log('...'); return false; }

错误处理 - 单元测试框架

几个常见的前端单元测试框架，这边简单介绍Jest，其它也有许多优秀的框架这边就不做过多概述了

其它优秀框架：Mocha/Jasmine/AVA/Tape等

Jest（会专门整理一篇文章）

优点 - 较好的支持React（facebook开发） - 基于 Jasmine 至今已经做了大量修改添加了很多特性 - 开箱即用配置少，API简单 - 支持断言和仿真，支持快照测试 - 在隔离环境下测试 - 互动模式选择要测试的模块 - 优雅的测试覆盖率报告，基于Istanbul - 智能并行测试，全局环境支持 - 拥有功能强大的模拟库 - Typescript兼容 举个简单的例子 - 新建一个js文件，测试 function total(a,b){ return a b; } - 再次新建一个js文件，并引入我们刚才创建js文件 const total = require('/total'); // test()函数来描述一个测试用例 test('testName', () => { expect(total(1, 2)).toBe(3); // toBe("通过条件") }); - 配置脚本，执行npm run test，显示测试成果 通过则显示成功结果，不通过则显示当前返回结果和预期返回结果

错误类型

Error

基础错误类型，其它错误类型都继承于该类型

EvalError

EvalError 类型的错误会在使用 eval()函数而发生异常时被抛出 new eval(); //抛出EvalError eval = foo; //抛出EvalError

RangeError

RangeError 类型的错误会在数值超出相应范围时触发

ReferenceError

访问不存在的变量时，就会发生这种错误

SyntaxError

当我们把语法错误的 JavaScript 字符串传入 eval()函数时，就会导致此类错误

TypeError

在变量中保存着意外的类型时，或者在访问不存在的 方法时，都会导致这种错误。错误的原因虽然多种多样，但归根结底还是由于在执行特定于类型的操作 时，变量的类型并不符合要求所致。

URIError

在使用 encodeURI()或 decodeURI()，而 URI 格式不正确时，就会导致 URIError 错误

总结

没有人的代码是完美无缺的，在编码过程中错误是相对难以避免的，那么当问题出现的时候我们怎么去比较好的发现它，并解决它就成了一个首当其冲的问题了。从原生代码层次我们可以通过try-catch和window.onerror和单元测试框架来使得我们代码更具鲁棒性，提升开发效率

参考资料

参考资料：JavaScript高级程序设计