JavaScript基础入门之错误捕获机制

目录
  • 前言
  • Error 对象
  • throw
  • try…catch…finally
    • finally 的规则
    • Try / Catch 性能
  • window.onerror
  • Promise 中的异常
    • Promise 中抛出异常
    • Promise中捕捉异常
  • Vue 的异常捕获
  • 总结

前言

Javascript 引擎是单线程的，因此一旦遇到异常，Javascript 引擎通常会停止执行，阻塞后续代码并抛出一个异常信息，因此对于可预见的异常，我们应该捕捉并正确展示给用户或开发者。

Error 对象

当运行时错误产生时，Error的实例对象会被抛出。

该错误对象有两个属性：

  • err.name：错误的名称/错误的类型
  • err.message：错误的提示信息

创建一个Error

new Error([message[,fileName[,lineNumber]]])

错误类型js共定义了下列 7 种错误类型：

  1. Error
  2. EvalError
  3. RangeError
  4. ReferenceError
  5. SyntaxError
  6. TypeError
  7. URIError

throw

有些JavaScript代码没有语法上的错误，但是存在逻辑错误，对于这种错误，JavaScript不会抛出异常，这时候我们可以自己定义一个error对象的实例，并使用throw语句来主动抛出异常。在程序中我们可以通过使用throw语句有目的的抛出异常，其语法格式如下:

throw new Error("errorstatements")

try…catch…finally

  • try 可能发生异常的代码
  • catch(error) 发生错误执行的代码
  • finally 无论如何都会执行的代码

三种形式的 try 声明:

  • try...catch
  • try...finally
  • try...catch...finally

finally 的规则

当在 finally 块中抛出异常信息时会覆盖掉 try 块中的异常信息

try {
    try {
        throw new Error('can not find it1');
    } finally {
        throw new Error('can not find it2');
    }
} catch (err) {
    console.log(err.message);
}

// can not find it2

如果从 finally 块中返回一个值，那么这个值将会成为整个 try-catch-finally 的返回值，无论是否有 return 语句在 try 和 catch 中。这包括在 catch 块里抛出的异常。

function test() {
    try {
        throw new Error('can not find it1');
        return 1;
    } catch (err) {
        throw new Error('can not find it2');
        return 2;
    } finally {
        return 3;
    }
}

console.log(test()); // 3

Try / Catch 性能

有一个大家众所周知的反优化模式就是使用 try/catch

在V8（其他JS引擎也可能出现相同情况）函数中使用了 try/catch 语句不能够被V8编译器优化.

window.onerror

通过在 window.onerror 上定义一个事件监听函数，程序中其他代码产生的未被捕获的异常往往就会被 window.onerror 上面注册的监听函数捕获到

window.onerror = function (message, source, lineno, colno, error) { }

  • message：异常信息（字符串）
  • source：发生异常的脚本URL（字符串）
  • lineno：发生异常的行号（数字）
  • colno：发生异常的列号（数字）
  • error：Error对象（对象）

Promise 中的异常

Promise 中抛出异常

  • new Promise((resolve,reject)=>{ reject(); })
  • Promise.resolve().then((resolve,reject)=>{ reject(); });
  • Promise.reject();
  • throw expression;

Promise中捕捉异常

  • promiseObj.then(undefined, (err)=>{ catch_statements });
  • promiseObj.catch((exception)=>{ catch_statements })

注意

在 JavaScript 函数中，只有 return / yield / throw 会中断函数的执行，reject 不会阻止继续执行

示例：

没有 return 的 reject

Promise.resolve()
.then(() => {
    console.log('before excute reject');
    reject(new Error('throw error'));
    console.log('after excute reject');
})
.catch((err) => {
    console.log(err.message);
});

// before excute reject
// throw error
// after excute reject

用了 return 的 reject

Promise.resolve()
.then(() => {
    console.log('before excute reject');
    return reject(new Error('throw error'));
    console.log('after excute reject'); //*** 区别在这里，return 的话这里不会执行了
})
.catch((err) => {
    console.log(err.message);
});

// before excute reject
// throw error

Vue 的异常捕获

Vue.config.errorHandler = (err, vm, info) => {
  console.error("通过vue errorHandler捕获的错误");
  console.error(err);
  console.error(vm);
  console.error(info);
};

总结

到此这篇关于JavaScript基础入门之错误捕获机制的文章就介绍到这了,更多相关js错误捕获机制内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 用window.onerror捕获并上报Js错误的方法

    用window.onerror捕获并上报Js错误的方法

    前两天有个2048游戏的用户反馈说,打开游戏后不能玩儿,只有一个游戏面板,数字无法初始化,更无法移动,设备为iPhone 4S.iOS 5.1.尝试从微信调起Safari打开,依然不好使.由于游戏中运用了比较多的HTML5特性,所以粗略估计是有JS报错导致.不过这样的信息该如何捕获到呢?当然是传说中的window.onerror. 从W3C找到关于window.onerror的方法体介绍: 这个意思,基本可以就是说,window.onerror方法,我们可以写成: /** * @param {S

  • javascript中的try catch异常捕获机制用法分析

    本文实例讲述了javascript中的try catch异常捕获机制用法.分享给大家供大家参考,具体如下: 1.跟Java一样,JavaScript也具有try catch块,进行异常捕获的机制. (1)典型的try catch语句 try{ } catch{ } finally{ } 跟java中一样,JS中最为典型的try catch语句也同样分为了三个部分,try用于捕获异常,catch用于处理异常,而finally用于关闭资源等后续操作. 举例: try{ throw "error&qu

  • JS使用onerror捕获异常示例

    本文实例讲述了JS使用onerror捕获异常的方法.分享给大家供大家参考,具体如下: 如果需要利用 onerror 事件,就必须创建一个处理错误的函数.你可以把这个函数叫作 onerror 事件处理器 (onerror event handler).这个事件处理器使用三个参数来调用:msg(错误消息).url(发生错误的页面的 url).line(发生错误的代码行). <head> <script type="text/javascript"> onerror=

  • JavaScript中的事件与异常捕获详析

    事件处理 [onClick]单击事件.[onMouseOver]鼠标经过事件.[onMouseOut]鼠标移出事件.[onChange]文本内容改变事件.[onSelect]文本被框选事件.[onFoucus]得到光标事件.[onBlur]光标失去事件.[onLoad]网页加载事件(在body标签中添加).[onUnload]网页关闭事件(在body标签中添加或者使用window.onload=function(){} ) 事件注册及监听 1. DOM0级事件处理 在标签中添加onClick或其

  • JS异步错误捕获的一些事小结

    引入 我们都知道 try catch 无法捕获 setTimeout 异步任务中的错误,那其中的原因是什么.以及异步代码在 js 中是特别常见的,我们该怎么做才比较? 无法捕获的情况 function main() { try { setTimeout(() => { throw new Error('async error') }, 1000) } catch(e) { console.log(e, 'err') console.log('continue...') } } main(); 这

  • JavaScript基础入门之错误捕获机制

    目录 前言 Error 对象 throw try-catch-finally finally 的规则 Try / Catch 性能 window.onerror Promise 中的异常 Promise 中抛出异常 Promise中捕捉异常 Vue 的异常捕获 总结 前言 Javascript 引擎是单线程的,因此一旦遇到异常,Javascript 引擎通常会停止执行,阻塞后续代码并抛出一个异常信息,因此对于可预见的异常,我们应该捕捉并正确展示给用户或开发者. Error 对象 当运行时错误产生

  • 整理Javascript基础入门学习笔记

    了解什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var  变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 1.语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 2.数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符

  • JavaScript错误处理机制全面分析讲解

    目录 1. Error 实例 2. 原生错误类型 2.1 ReferenceError 2.2 SyntaxError 2.3 TypeError 2.4 RangeError 2.5 URIError 2.6 evalError 3. 自定义错误类型 4. throw 5. try…catch 6. finally 总结 1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 const err = new E

  • 深入分析javascript中的错误处理机制

    前面的话 错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较差的用户体验.由于任何javascript错误都可能导致网页无法使用,因此作为开发人员,必须要知道何时可能出错,为什么会出错,以及会出什么错.本文将详细介绍javascript中的错误处理机制 error对象 error对象是包含错误信息的对象,是javascript的原生对象.当代码解析或运行时发生错误,javascript引擎就会自动产生并抛出一个error对象的实例,然后整个程序

  • 全面了解javascript中的错误处理机制

    前面的话 错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较差的用户体验.由于任何javascript错误都可能导致网页无法使用,因此作为开发人员,必须要知道何时可能出错,为什么会出错,以及会出什么错.本文将详细介绍javascript中的错误处理机制 error对象 error对象是包含错误信息的对象,是javascript的原生对象.当代码解析或运行时发生错误,javascript引擎就会自动产生并抛出一个error对象的实例,然后整个程序

  • javascript事件捕获机制【深入分析IE和DOM中的事件模型】

    本文实例分析了javascript事件捕获机制.分享给大家供大家参考,具体如下: 1.什么是事件冒泡? 在排序算法中,我们学过冒泡排序法,所谓冒泡就是让底层的东西浮出水面,对于事件冒泡也同样是如此, 下面我们来看一个例子来说明什么是事件冒泡. <div> <button>测试</button> </div> <script> $("div").bind("click",function(){alert(&q

  • JavaScript基础教程——入门必看篇

    JavaScript基础教程——入门必看篇

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

  • javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内 事件冒泡:自下而上的去触发事件---由内到外 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡 一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了 下面是我尝试的例子: <!DOCTY

  • 简介JavaScript错误处理机制

    1. try-catch语句 ECMA-262第3版引入了try-catch语句,作为JavaScript中处理异常的一种标准方式. 语法: try{ // 可能会导致错误的代码 }catch (error){ // 在错误发生时怎么处理 } 也就是说,我们应该把所有可能会抛出错误的代码都放在try语句块中,而把那些用于错误处理代码放在catch块中. try-catch语句的逻辑是:如果try块中的任何代码发生了错误,就会立即退出代码执行过程,然后接着执行catch块.此时,catch块会接收

随机推荐