JavaScript 异常处理 下载APP
章节索引 :

异常处理

异常处理可以使程序在流程上更加完善。

在 JavaScript 中可以使用 throw 抛出异常,使用 try ... catch 捕获错误。

1. throw

throw 语句用来抛出一个用户自定义的异常。(MDN)

throw 用于抛出一个异常,这种异常通常是程序出现了不符合预期的错误。

alert('出错前');

throw '发生了一个错误!';

alert('出错后');

图片描述

当出现 throw 时,程序将会中断执行。

如果 throw 发生在 try ... catch 中,则会执行 catch 中的代码块,同时将异常信息带给 catch。

2. try … catch

try…catch 语句标记要尝试的语句块,并指定一个出现异常时抛出的响应。

try ... catch 可以用于捕获异常,当出现 throw 时,会结束 try 内的代码执行,直接进入到 catch,执行 catch 内的代码块。

try {
  alert('出错前');

  throw '发生了一个错误!';

  alert('出错后');
} catch (e) { // e 是错误信息,名字随意,符合变量命名规范就行
  alert('出错了!错误是:' + e);
}

图片描述

需要注意的是,以前 catch 后面的错误参数是必须接收的,否则会报错。

但 ES2019 中有一个提案,可以选择性的提供给 catch 参数,所以最新的 chrome 不传递错误参数也是可以的。

try {
  alert('出错前');

  throw '发生了一个错误!';

  alert('出错后');
} catch {
  alert('出错了!');
}

图片描述

由于是比较新的提案,所以建议没有工具参与代码编译时,还是写上错误参数的接收,避免因浏览器兼容性造成的问题。

在 try 后面还可以跟 finally 部分,即无论 try 中的代码块是否抛出错误,都会执行 finally 代码块。

try {
  alert('开始请求数据,loading 显示');

  throw '没有网络';

  alert('请求结果是:..编不下去了,反正到不了这里');
} catch (e) {
  alert('出现错误:' + e);
} finally {
  alert('关闭 loading');
}

图片描述

3. 可以写条件的 catch 语句

部分文献记载了如下格式的 try … catch 语法。

try {
  throw 'error';
} catch (e if e instanceof TypeError) {
  console.log('TypeError');
} catch (e if e instanceof ReferenceError) {
  console.log('ReferenceError');
} catch (e) {
  console.log(e);
}

但目前主流浏览器基本都无法正常运行这种语法的 try … catch 语句,所以不要使用。

如果有类似的需求,可以使用 if 来代替。

try {
  throw 'error';
} catch (e) {
  if (e instanceof TypeError) {
    console.log('TypeError');
  } else if (e instanceof ReferenceError) {
    console.log('ReferenceError');
  } else {
    console.log(e);
  }
}

4. Error 对象

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

通常在使用 throw 抛出异常时,会抛出一个 Error 对象的实例。

try {
  throw new Error('主动抛出一个错误');
} catch (e) {
  console.error(e);
}

图片描述

和大部分内置对象一样,Error 实例也可以不使用 new 关键字创建。

try {
  throw Error('主动抛出一个错误');
} catch (e) {
  console.error(e);
}

图片描述

抛出 Error 实例,可以得到出现异常的文件和对应的行号。

除了 Error ,还有几种预定义好语义的异常对象。

5. 其他异常对象

  • URIError 表示以一种错误的方式使用全局URI处理函数而产生的错误;
  • TypeError 值的类型非预期类型时发生的错误;
  • SyntaxError 尝试解析语法上不合法的代码的错误;
  • ReferenceError 当一个不存在的变量被引用时发生的错误;
  • RangeError 当一个值不在其所允许的范围或者集合中抛出的异常;
  • InternalError 表示出现在 JavaScript 引擎内部的错误。非标准对象,不建议使用;
  • EvalError 本对象代表了一个关于 eval 函数的错误.此异常不再会被 JavaScript 抛出,但是EvalError对象仍然保持兼容性。

这些异常对象的使用和 Error 几乎一致。

浏览器碰到对应的异常,也会抛出。

try {
    console.log(notDefinedVariable);
} catch (e) {
    console.error(e);
}

图片描述

因为 notDefinedVariable 并没有定义,所以浏览器会抛出 ReferenceError 异常,同时提示变量没有定义。

6. 小结

完整的产品业务逻辑流程,基本都要 try ... catch 参与控制,因为出现异常时,还要有对应的动作,如网络请求异常,则提示用户重试,或主动进行超时重新请求操作。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源