副队长JavaScript教程(48)-异常处理基础

点此查看所有教程、项目、源码导航文章目录1. 背景2. 异常是什么3. try catch finally 基础语法3.1 try3.2 catch3.3 finally4. 错误对象 err 的常用属性5. 典型实战场景调用不存在的函数6. 重要注意点7. 小结1. 背景前面我们写的 JS 代码都是预期能够正常运行的代码。但是在实际开发里总会出现意外情况访问不存在的属性、调用一个不存在的函数等等。一旦代码发生错误JS 的默认行为是直接终止后续所有代码执行。很多时候我们不希望程序直接崩溃退出而是希望捕获错误、给出提示让程序可以继续往下跑。JS 给我们提供了异常捕获语法try catch finally本篇我们就来学习它。2. 异常是什么异常也叫运行时错误。简单理解代码语法没问题能够正常被浏览器解析但是在执行的时候遇到了无法处理的情况就会抛出异常。我们先看一段出错的代码console.log(代码开始执行);// 变量abc没有定义会抛出引用错误console.log(abc);console.log(代码结束执行);运行结果控制台报错提示abc is not defined也就是abc未定义的意思。错误一旦抛出整条执行流程就断掉了。这就是我们需要异常捕获的原因把错误 “接住”不让整个程序直接崩掉。3. try catch finally 基础语法try{// 这里放我们认为有可能出错的代码}catch(err){// 捕获到错误之后执行这里的代码}finally{// 无论有没有报错这里的代码一定会执行}3.1 trytry代码块里面用来包裹有风险、可能抛出错误的代码。JS 会尝试执行 try 里面的语句。如果里面一切正常不会进入 catch一旦抛出异常立刻停止 try 内部后续代码跳转到 catch。3.2 catchcatch用来接收捕获到的错误。括号里的err是一个错误对象里面保存了这次错误的相关信息。我们写一个示例try{console.log(try内部代码开始);console.log(abc);console.log(try内部代码结束);}catch(err){console.log(捕获到异常了);console.log(错误信息,err.message);}console.log(外部代码继续执行);运行逻辑执行console.log(try内部代码开始)console.log(abc)报错立刻终止 try 里面剩下代码进入 catch拿到错误对象 err打印信息catch 执行完毕继续运行 catch 外面的代码。对比前面不加 try-catch 的例子外部代码不会被阻断了。3.3 finallyfinally是可选的代码块。不管 try 里面有没有报错不管 catch 是否执行finally 里面的代码一定执行。try{console.log(try执行);// console.log(abc);}catch(err){console.log(捕获错误,err.message);}finally{console.log(finally 一定会执行);}开发里 finally 适合做收尾工作关闭加载提示、释放资源、清空等待状态。一个容易踩的小知识点哪怕 try 或者 catch 里面写了 returnfinally 依然会执行。4. 错误对象 err 的常用属性当异常被捕获catch 拿到的 err 是一个内置错误对象自带两个最常用属性。try{console.log(abc);}catch(err){console.log(err.name);// 错误类型名称console.log(err.message);// 错误的文字描述}控制台输出如下name错误类型例如ReferenceError、TypeError这个下一篇具体讲解。message具体的错误文字用来告诉我们哪里出了问题5. 典型实战场景调用不存在的函数调用不存在的函数是很常见的运行时错误适合用来演示 try-catch 的用处。try{// 函数 fn 没有定义fn();console.log(函数调用成功);}catch(err){console.log(函数调用出错,err.message);}console.log(后面的代码继续运行);运行结果如果不加捕获一旦调用不存在的函数后面代码全部停止。6. 重要注意点try 只能捕获运行时异常语法错误少写括号、少写引号属于解析阶段错误try-catch 抓不住。try 不要无脑包裹全部代码只包裹真正有可能出错的一小段方便定位问题。catch 不要空着什么都不写空 catch 会悄悄吞掉错误调试的时候很难发现问题。7. 小结代码抛出异常之后默认会终止后续代码运行try尝试执行风险代码catch接住异常做容错处理finally无论如何都执行的收尾代码catch 的 err 错误对象可以通过 message、name 查看错误详情常见使用场景调用函数、访问对象属性等容易发生意外的地方。预告下一篇我们学习 throw 主动抛出异常认识 JS 内置的各类错误类型以及异常处理的编码规范。