返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解JavaScript错误捕获
  • 308
分享到

详解JavaScript错误捕获

2024-04-02 19:04:59 308人浏览 泡泡鱼
摘要

目录一、基本使用与逻辑二、特性三、错误对象四、较好的catch和throw策略五、Promise的错误处理六、性能损耗​一、基本使用与逻辑 使用 try{

一、基本使用与逻辑

使用


try{
    //code....
}catch(err){
    //error handling
}finally{
    //no matter what happens in the try/catch (error or no error), this code in the finally statement should run. 
}

逻辑

二、特性

try...catch 仅适用于运行时错误,解释阶段错误无法正常工作


try{
    {{{{{{{
}catch(err){
    console.error(err)
}
//引擎在‘parse-time'出错,导致无法理解代码,因此无法捕捉

try...catch 只能同步工作


try{
    setTimeout(function(){
        undefinedVariable;
    },1000)
}catch(err){
    console.error(err)
}
//setTimeout的回调函数执行时,引擎已经离开try...catch结构

finally 能让try块中的return语句失效


function test(){
  try {
    return 1;
  } catch(error) {
    return 2;
  } finally {
    return 3;
  }
}
console.log(test());
//3

三、错误对象

当程序发生error,js内部会生成一个包含error细节的对象,该对象会被作为参数传进catch

对于所有内置错误,错误对象具有两个主要属性

  • name 错误类型
  • message 文本类型的错误信息
  • stack (非标准属性)发生错误时的调用栈信息,主要用于调试

try {
  lalala; // error, variable is not defined!
} catch (err) {
  alert(err.name); // ReferenceError
  alert(err.message); // lalala is not defined
  alert(err.stack); // ReferenceError: lalala is not defined at (...call stack)

  // Can also show an error as a whole
  // The error is converted to string as "name: message"
  alert(err); // ReferenceError: lalala is not defined
}

理论上,我们可以throw任何东西作为错误对象,但最好的习惯是throw一个具有name,message的对象,以便和内置错误对象保持兼容

番外:内置的错误对象

对象 含义
ReferenceError 引用未定义变量时触发
SyntaxError 使用不合法的语法结构时触发
TypeError 值得类型非预期时触发
URIError 错误使用全局URI函数如encodeURI()、decodeURI()等时触发
RangeError 对Array构造函数使用错误的长度值,对Number.toExponential()、Number.toFixed()或Number.toPrecision()使用无效数字等
EvalError 全局函数eval()中发生的错误

四、较好的catch和throw策略

​ catch错误不单单是为了防止程序挂掉,更重要的目的是方便调试,找bug,所以对错误的处理策略,稍微可以体现出码者的优雅性

​ 俗话说的好,码者,人恒雅也,尽量遵循一个原则,catch只处理自己知道的错误

举个梨子


let JSON = '{ "age": 30 }'; 
try{
  let user = JSON.parse(json);  
  alert( user.name );
} catch (err) {
  console.error('JSON Error:'+err);
}

上述例子的catch策略能保证程序正常,因为catch块能catch内部所有的错误,无论是JSON.parse出错还是user.name不存在报错,都能被catch到,但两种错误都用同一种打印是不利于调试的,写成下面这样会好一点


let json = '{"age":30}'
try{
  let user =  JSON.parse(json);
  alert(user.name)
}catch(err){
   if(err instanceof SyntaxError){
       console.error('JSON Error:'+err);
   }
   else throw err;
}

每个catch块处理自己知道得,可能会出现得错误,就是说,编程人员在编程的时候,catch那些预料到的错误,而将可能自己没料到的错误抛到外面。

五、Promise的错误处理

​ 众所周知,Promise是会吞掉error的,因为promise的实现就在内部对所有error进行了捕获,且捕获到的error不是向外抛出(外指promise之外),而是沿着链找到最近的onreject回调传入,所以promise的错误处理只有两种办法

  1. 设置onreject回调
  2. 全局捕获

举个栗子


try{
    new Promise((resolve,reject)=>{
        throw new Error('promise error')
    }).catch(()=>{
        //错误在最近的onreject回调被捕获
        console.error(err);
    })
}catch(err){
    //永远不会执行,promise吞掉error
    console.error(err);
}

另外需要注意,无论是执行者函数(executor)和还是 promise 的处理程序(handler),内部发生的错误统统吞掉,相当于被隐式catch,error会自动找到最近的onreject回调传进去


try{
    new Promise((resolve,reject)=>{
        resolve();
    }).then(()=>{
        throw new Error('promise then error');
    }).catch((err){
        console.error(err);
    })
}catch(err){
    //地球毁灭之前都不会执行
    console.error(err)
}

同理,在错误找到onreject传进去之前,经过的then注册的onfulfilled回调统统失效,直到找到onreject回调,处理之后,onreject回调之后的onfulfilled回调才正常


try {
    new Promise((resolve, reject) => {
        throw new Error('promise error')
    }).then((ret) => {
        //错误没有处理,失效
        console.log('then1:' + ret)
    }).catch((err) => {
        //错误处理了,后序正常
        console.error(err);
        return 'handled'
    }).then((ret) => {
        //正常执行
        console.log('then2' + ret);
    })
} catch (err) {
    //同样的,人类毁灭之前都不会执行
    console.error(err)
}

// Error:promise error
//then2handled

那整条链一个catch都没设置会怎么样呢?

那这个error就会击穿地心,一直穿透到全局,根据宿主环境的不同触发不同的全局事件,比如说浏览器中会触发 unhandledrejection事件,node环境中也会触发unhandledRejection事件,一般会对这事件进行监听,再显示信息给编程人员或者用户

番外1:chromium / v8 / v8 / 3.29.45 的 Promise内部错误捕捉

番外2:async/await错误捕捉

六、性能损耗​

After V8 version 6 (shipped with Node 8.3 and latest Chrome), the perfORMance of code inside try-catch is the same as that of normal code. ------ 爆栈网

(稍微测了一下,相差无几)

以上就是详解javascript错误捕获的详细内容,更多关于JavaScript 错误捕获的资料请关注编程网其它相关文章!

--结束END--

本文标题: 详解JavaScript错误捕获

本文链接: https://lsjlt.com/news/124464.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解JavaScript错误捕获
    目录一、基本使用与逻辑二、特性三、错误对象四、较好的catch和throw策略五、Promise的错误处理六、性能损耗​一、基本使用与逻辑 使用 try{ ...
    99+
    2024-04-02
  • JavsScript中Promise的错误捕获详解
    目录我们需要在异步任务中准确的进行错误捕获,以便我们可以知道错误出在什么地方我们再讨论then方法中的第二个参数和Promise.catch方法的区别题: then方法的连续调用,怎...
    99+
    2024-04-02
  • 怎么在JavaScript中捕获错误
    这篇文章将为大家详细讲解有关怎么在JavaScript中捕获错误,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript的作用是什么1、能够嵌入动态文本于HTML页面。2、对浏览器...
    99+
    2023-06-14
  • golang 错误捕获
    在golang中,错误是不可避免的。无论应用程序多小或多大,都会遇到错误。因此,了解如何正确地捕获和处理错误是非常重要的。本文将探讨golang中的错误处理机制和一些最佳实践。错误类型在golang中,错误是一个实现了error接口的类型。...
    99+
    2023-05-16
  • Javascript中async与await的捕捉错误详解
    目录async与await捕捉错误正常的输出时try catch捕捉错误多个异步嵌套时 await-to-js异步嵌套使用了try,代码相对不够智能总结async与awai...
    99+
    2024-04-02
  • JavaScript基础入门之错误捕获机制
    目录前言Error 对象throwtry…catch…finallyfinally 的规则Try / Catch 性能window.onerrorPromise 中的异常Promis...
    99+
    2024-04-02
  • 如何在 JavaScript 中捕获和处理错误
    ...
    99+
    2024-04-02
  • JavaScript 事件捕获冒泡与捕获详情
    目录一、事件流1、概念2、DOM事件流二、事件委托1、事件委托的优点2、事件委托的使用三、禁止事件冒泡与捕获四、参考文献一、事件流 JavaScript中,事件流指的是DOM事件流。...
    99+
    2024-04-02
  • 怎么捕获await错误
    本文小编为大家详细介绍“怎么捕获await错误”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么捕获await错误”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。前言Promise 是一种在 JavaScript...
    99+
    2023-07-04
  • golang 全局捕获错误
    在Go语言中,错误处理是非常重要的。尤其是在一些大型的应用程序中,错误可能会通过多个层次的函数传递,并最终影响应用程序的整体运行效果。因此,对错误的处理和捕获变得尤为关键,本文将介绍一种Go语言中捕获全局错误的方法。一、错误原理在编写Go应...
    99+
    2023-05-14
  • java如何捕获InterruptedException错误
    小编给大家分享一下java如何捕获InterruptedException错误,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!捕获...
    99+
    2024-04-02
  • php怎么捕获错误提示
    本文操作环境:windows7系统、PHP7.1版、DELL G3电脑php怎么捕获错误提示php异常处理捕获错误整理PHP的错误报告有三种:错误,语法解析错误,致命错误警告注意后果:错误 -> 致命错误,会终止已下程序的执行,语法错...
    99+
    2017-02-21
    php 错误提示
  • php curl 错误捕获的方法
    本文操作环境:Windows7系统、PHP7.1版、DELL G3电脑php curl 错误捕获的方法curl_error($ch) 用 curl_error 来获取 curl 的错误介绍:curl_error — 返回一个保护当前会话最近...
    99+
    2016-01-18
    php curl
  • larval中怎样捕获mysql错误
    这篇文章主要介绍了larval中怎样捕获mysql错误,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。larval捕获mysql错误的方法:1、使...
    99+
    2024-04-02
  • php如何捕获错误提示
    本篇内容主要讲解“php如何捕获错误提示”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php如何捕获错误提示”吧!php捕获错误提示的方法:1、通过“error_reporting(E_ALL)...
    99+
    2023-06-25
  • golang错误捕获源码分析
    这篇文章主要介绍“golang错误捕获源码分析”,在日常操作中,相信很多人在golang错误捕获源码分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”golang错误捕获源码分析”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-06
  • JS前端错误监控捕获以及上报方法详解
    目录前端错误捕获方法不同场景错误处理方式错误信息上报ajax进行上报image上报sendBeacon前端错误捕获方法 前端捕获错误的方法: try..catch:捕获的异常必须是...
    99+
    2023-01-08
    JS前端错误监控捕获上报 JS 错误监控捕获
  • iOS block的值捕获与指针捕获详解
    目录指针与指针变量block捕获变量方式值捕获指针捕获__block修饰的变量关于block延伸的知识点总结指针与指针变量 通俗的理解: 指针:内存地址指针变量:存放内存地址的变量指...
    99+
    2024-04-02
  • await错误捕获实现方式源码解析
    目录前言Promise 的使用方法await-to-js源码总结前言 Promise 是一种在 JavaScript 中用于处理异步操作的机制。Promise 在开发中被广泛使用,这...
    99+
    2022-12-25
    await 错误捕获 await 错误
  • 基于Android 错误信息捕获发送至服务器的详解
    程序员最头疼的事情就是bug和debug。这次debug长达20天,搞的我心力交瘁。累,因为Android兼容性,不同手机会有不同的bug出来,而且很难复现,所以就上网找了下类...
    99+
    2022-06-06
    服务器 捕获 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作