js异常处理方案

news2024/10/7 13:14:44

文章目录

  • 异常处理方案
  • 同步代码的异常处理
  • Promise 的异常处理
  • async await 的异常处理

感谢阅读，觉得有帮助可以点点关注点点赞，谢谢！

异常处理方案

在JS开发中，处理异常包括两步：先抛出异常，然后捕获异常。
为什么要做异常处理
异常处理非常重要，至少有以下几个原因：

1.防止程序报错甚至停止运行：当代码执行过程中发生错误或异常时，如果没有适当的异常处理机制，程序可能会报错、停止运行，甚至崩溃。通过处理异常，我们可以捕获错误并采取适当的措施避免系统报错。
2.错误排查和调试：异常处理有助于定位和排查错误。可以通过捕获异常并输出相关信息，比如打印日志、错误上报、跟踪堆栈等等，以便快速定位问题所在，并进行调试和修复。
3.提高代码健壮性和可靠性：可以采取适当的措施处理潜在的异常情况，从而减少程序出错的可能性。
4.提升用户体验：通过兜底、容错、容灾等异常处理方案，可以向用户提供有效的错误信息提示，而不是让用户界面无响应甚至白屏。

抛出异常
抛出异常的使用场景举例：
我们经常会封装一些工具函数，这些函数可能给自己用，也可能给外部团队用。
在函数内部，如果不符合预期的业务逻辑，或者遇到异常情况时，很多人的写法是直接 return，不往下执行了。但是 return 的写法存在一个很大的弊端：调用者不知道是因为函数内部没有正常执行，还是执行的返回结果就是一个undefined。return 的写法只是规避了问题，没有解决问题。建议的做法是：我们需要手动抛出异常。

捕获异常
如果只是抛出异常，而不捕获异常的话，是比较危险的。这意味着当前任务立即终止，不再执行（当然，后续的其他任务会正常执行）。此外，这个异常信息会层层往上，抛给上层的调用者。如果一直未被捕获，则最终会抛给浏览器，浏览器控制台就会报错。

接下来，我们看一下不同代码场景下的异常处理方案。

上报异常
如果有必要的话，你可以把异常信息和日志，上报给监控服务器，然后集中分析。我每天上班第一件事，就是打开监控系统，看错误日志，然后对症下药解决问题

同步代码的异常处理

通过 throw 抛出异常
我们可以通过 throw关键字，抛出一个用户自定义的异常。当代码执行时遇到 throw 语句时，当前函数会停止停止，即：当前函数 throw 后面的代码不会再执行。

throw 意思是，告诉调用者，当前被调用的函数报错了，调用者接下来需要捕获异常或者修改代码逻辑。

可以在 throw 的后面添加表达式或者数据类型，将添加的内容抛出去。数据类型可以是：number、string、boolean、对象等。

代码举例：

function sum(num1, num2) {
  if (typeof num1 !== "number") {
    throw "type error: num1传入的类型有问题, 必须是number类型"
  }

  if (typeof num2 !== "number") {
    throw "type error: num2传入的类型有问题, 必须是number类型"
  }

  return num1 + num2
}

sum('a', 'b');

打印结果：
在这里插入图片描述
当然，我们还可以 throw一个封装好的对象。比如：

class myError {
  constructor(errCode, errMsg) {
    this.errCode = errMsg;
    this.errMsg = errMsg;
  }
}

function foo() {
  throw new myError(-1, 'not login');
}

foo();

上面这种写法比较麻烦，一般不这么写。其实，JS中已经内置了 Error 类，专门用于生成错误信息。
Error 类
JS内置的 Error 类非常好用。

代码举例：

function foo() {
  throw new Error('not login');
}


foo();

打印结果：
在这里插入图片描述
上面的打印结果可以看到，通过 Error 抛出来的错误，不仅可以看到报错信息，还可以看到调用栈，便于快速定位问题所在。非常方便。

通过 try catch 捕获异常
同步代码，只抛出异常，不捕获异常的代码举例：

function foo() {
  throw new Error('not login');
}

foo();
// 当前任务立即终止，不再执行；下面这行代码和 foo() 都在同一个 同步任务 中
console.log('qianguyihao');

打印结果：
在这里插入图片描述
可以看到，最后一行的 log 并没有执行。

我们可以使用 try catch 抛出异常， 对上述代码进行改进。代码举例：

function foo() {
  throw new Error('not login');
}

// 通过 try catch 手动捕获异常
try {
  foo();
} catch (err) {
  console.log(err);
}

// 当前任务的后续代码会继续执行
console.log('qianguyihao');

打印结果：
在这里插入图片描述
通过 try catch finally 捕获异常
如果有些代码必须要执行，我们可以放到 finally 里。

不管是否遇到异常，finally的代码一定会执行。
如果 try 和 finally 中都有返回值，那么会使用finally中的返回值。

代码举例：

function foo() {
  throw new Error('not login');
}

// 通过 try catch 捕获异常
try {
  foo();
} catch (err) {
  console.log(err);
} finally {
  console.log("finally")
}

// 后续代码会继续执行
console.log('qianguyihao');

try catch 只能捕获同步代码的异常
try catch只能捕获同步代码里的异常，而 Promise.reject() 是异步代码。

原因是：当异步函数抛出异常时，对于宏任务而言，执行函数时已经将该函数推入栈，此时并不在 try-catch 所在的栈，所以 try-catch 并不能捕获到错误。对于微任务而言（比如 promise）promise 的构造函数的异常只能被自带的 reject 也就是.catch 函数捕获到。

使用 window.onerror 监听未被捕获的代码异常
如果JS代码抛出了异常但没有进行捕获，我们可以使用 JS 自带的 window.onerror 事件监听到这些错误。
代码举例：

// 监听同步代码的异常
window.onerror = (event) => {
  console.error('onerror 监听到未被捕获的异常:', event)
};

function foo1() {
  throw new Error('not login');
}

function foo2() {
  throw new Error('network error');
}

foo1();
foo2();

打印结果：
在这里插入图片描述

Promise 的异常处理

reject() 会自动抛出异常
在使用 Promise 时，当我们调用了 reject() 之后，系统会自动抛出异常，不需要我们手动抛出异常。这是 Promise的内部机制。但是我们需要手动捕获异常。

当 Promise 进入 rejected状态之后，会触发 catch()方法的执行，捕获异常。此时，成功完成了Promise异常处理的闭环。

在then() 中抛出异常（重要）
当then()方法传入的回调函数中，如果遇到异常或者手动抛出异常，那么，then()所返回的新的 Promise 会进入rejected 状态，进而触发新Promise 的 catch() 方法的执行，做异常捕获。

场景1：在then()方法传入的回调函数中，如果代码在执行时遇到异常，系统会自动抛出异常。此时我们需要在 catch() 里手动捕获异常，否则会报错。

自动抛出异常的代码举例：（由于没有捕获异常，所以会报错）

const myPromise = new Promise((resolve, reject) => {
  resolve('qianguyihao1 fulfilled');
});

myPromise.then(res => {
  console.log('res1:', res);
  // 显然，person 并没有 forEach()方法。所以，代码在执行时，会遇到异常。
  const person = { name: 'vae' };
  person.forEach(item => {
    console.log('item:', item);
  })
  // 这行代码不会执行，因为上面的代码报错了
  console.log('qianguyihao2');
}).then(res => {
  console.log('res2:', res);
})

// 定时器里的代码正常执行
setTimeout(() => {
  console.log('qianguyihao3');
}, 100)

运行结果：
在这里插入图片描述
代码改进：（代码在执行时遇到异常，此时我们捕获异常，所以系统不会报错，这才是推荐的写法）

const myPromise = new Promise((resolve, reject) => {
  resolve('qianguyihao1 fulfilled');
});

myPromise.then(res => {
  console.log('res1:', res);
  // 显然，person 并没有 forEach()方法。所以，代码在执行时，会遇到异常。
  const person = { name: 'vae' };
  person.forEach(item => {
    console.log('item:', item);
  })
  // 这行代码不会执行，因为上面的代码报错了
  console.log('qianguyihao2');
}).then(res => {
  console.log('res2:', res);
}).catch(err => {
  // 在 catch()方法传入的会调函数里，捕获异常
  console.log('err2:', err);
})

// 定时器里的代码正常执行
setTimeout(() => {
  console.log('qianguyihao3');
}, 100)

打印结果
在这里插入图片描述
场景2：在then()方法传入的回调函数中，如果我们手动抛出异常，此时我们需要在 catch() 里手动捕获异常，否则会报错。

代码举例：（手动抛出异常，未捕获，所以会报错）

const myPromise = new Promise((resolve, reject) => {
  resolve('qianguyihao fulfilled 1');
});

myPromise.then(res => {
  console.log('res1:', res);
  // 手动抛出异常
  throw new Error('qianguyihao rejected 2')
}).then(res => {
  console.log('res2:', res);
})

// 定时器里的代码正常执行
setTimeout(() => {
  console.log('qianguyihao3');
}, 100)

打印结果：
在这里插入图片描述
代码改进：（代码在执行时遇到异常，此时我们捕获异常，所以系统不会报错，这才是推荐的写法）

const myPromise = new Promise((resolve, reject) => {
  resolve('qianguyihao fulfilled 1');
});

myPromise.then(res => {
  console.log('res1:', res);
  // 手动抛出异常
  throw new Error('qianguyihao rejected 2')
}).then(res => {
  console.log('res2:', res);
}, (err) => {
  console.log('err2:', err);
})

// 定时器里的代码正常执行
setTimeout(() => {
  console.log('qianguyihao3');
}, 100)

打印结果：
在这里插入图片描述
使用 unhandledrejection 事件监听未被捕获的Promise异常
如果Promise抛出了异常但没有进行捕获，我们可以使用JS自带的 unhandledrejection 事件监听到这些错误。这个事件非常有用，尤其是当我们需要集中做日志收集时，屡试不爽。这个事件只能用于监听 Promise 中的异常，不能用于其他同步代码的异常。

先来看下面这行代码：

const myPromise = new Promise((resolve, reject) => {
  console.log('qianguyihao1');
  reject('not login');
  console.log('qianguyihao2');
})

打印结果：
在这里插入图片描述
上面的代码抛出了异常，但没有捕获异常，所以我们可以用 unhandledrejection 事件监听到。代码举例：

// 监听未被捕获的 Promise 异常
window.addEventListener('unhandledrejection', (event) => {
  console.error(`unhandledrejection 监听到异常，写法1: ${event.reason}`)
});

window.onunhandledrejection = event => {
  console.error(`unhandledrejection 监听到异常，写法2: ${event.reason}`);
};

window.onerror = (event) => {
  console.error('onerror 监听到异常:', event);
};


const promise1 = new Promise((resolve, reject) => {
  reject('not login');
})

const promise2 = new Promise((resolve, reject) => {
  throw new Error('network error');
  resolve();
})

打印结果：
在这里插入图片描述
可以看到，promise1 和 Promise2 的异常，都被 unhandledrejection 事件收集到了。

代码举例2：

window.addEventListener('unhandledrejection', (event) => {
  console.error(`unhandledrejection 监听到异常: ${event.reason}`)
});

window.onerror = (event) => {
  console.error('onerror 监听到异常:', event);
};

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    throw new Error('not login');
    resolve();
  }, 100);
})

打印结果：
在这里插入图片描述
上面的代码中，unhandledrejection 无法监听异常，因为定时器里的代码属于宏任务。

resolve()之后，再报错无效
代码举例：

const myPromise = new Promise((resolve, reject) => {
  resolve('fulfilled');
  throw new Error("自定义错误");
});

myPromise.then(res => {
  console.log("res", res);
  return res + 1;
}).catch(err => {
  console.log("err：", err);
});

打印结果：

res fulfilled

上方代码中，第3行的异常代码相当于没写。因为 resolve()之后，Promise的状态会立即进入 fulfilled，然后走到 then()，状态不可逆。

async await 的异常处理

捕获异常
代码举例：

function requestData1() {
  return new Promise((resolve, reject) => {
    reject('任务1失败');
  })
}

function requestData2() {
  return new Promise((resolve, reject) => {
    resolve('任务2成功');
  })
}

async function getData() {
  // requestData1 在执行时，遇到异常
  await requestData1();
  /*
  由于上面的代码在执行是遇到异常，所以，这里虽然什么都没写，底层默认写了如下代码：
  return Promise.reject('任务1失败');
  */

  // 下面这两行代码不会再执行了，因为上面的代码遇到了异常
  console.log('qianguyihao1');
  await requestData2();
}

getData();

// 【注意】定时器里的代码会正常实行，因为它在另外一个宏任务里，不在上面的微任务里
setTimeout(() => {
  console.log('qianguyihao2');
}, 100)

打印结果：
在这里插入图片描述
所以，为了避免上述问题，我们还需要手动捕获异常。我们捕获到异常之后，这个异常就不会继续网上抛了，更不会抛给浏览器。

感谢阅读，觉得有帮助可以点点关注点点赞，谢谢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1868239.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

理解MySQL核心技术：外键的概念、作用和应用实例

理解MySQL核心技术：外键的概念、作用和应用实例

引言 在数据库管理系统（DBMS）中，外键（Foreign Key）是维持数据一致性和实现数据完整性的重要工具。本文将详细介绍MySQL外键的基本概念、作用，以及相关的操作指南和应用实例，帮助读者掌握并灵活…
阅读更多...
MHA、MMM高可用方案及故障切换

MHA、MMM高可用方案及故障切换

目录 一、MHA高可用方案 1、MHA的组成 2、MHA的工作原理 3、部署MHA架构 第一部分：一主两从数据库架构部署 1、全部更改主机名、初始化操作、开启mysql服务、设置主机名管理、时间同步 2、MySQL服务器做主从复制 3、测试主从效果 第二部分：MHA架…
阅读更多...
mysql岗位实习----教务系统管理

mysql岗位实习----教务系统管理

教务管理系统 一、DDL CREATE TABLE users (user_id int(11) NOT NULL AUTO_INCREMENT COMMENT 用户ID,username varchar(50) NOT NULL COMMENT 用户名,password varchar(255) NOT NULL COMMENT 密码,gender enum(男,女) NOT NULL COMMENT 性别,email varchar(100) DEFAULT N…
阅读更多...
Flutter 小技巧之为什么推荐 Widget 使用 const

Flutter 小技巧之为什么推荐 Widget 使用 const

今天收到这个问题，本来想着简单回复下，但是感觉这个话题又可以稍微展开讲讲，干脆就整理成一篇简单的科普，这样也能更方便清晰地回答这个问题。 聊这个问题之前，我们需要把一个“老生常谈”的概念拿出来说，那…
阅读更多...
推荐一个AI导航网站和一篇文章：精益开发

推荐一个AI导航网站和一篇文章：精益开发

第49期 AI 驿站 一个超级全面AI、的导航网站 https://www.51mskd.com/ “精益开发”的精益是什么？ 最流行的软件开发模式，现在是“敏捷开发”（agile development）。 但是，很多人不知道，敏捷只是一种价值…
阅读更多...
企业数据治理的下一步是数据资产管理？

企业数据治理的下一步是数据资产管理？

随着信息技术的飞速发展和数字化转型的深入推进，企业数据已成为驱动业务增长和创新的核心要素。当企业数据治理工作取得显著成效后，如何进一步发挥数据的价值，实现数据资产的有效管理，成为企业面临的重要课题。 数据治理的基石作用…
阅读更多...
倒计时日期 桌面倒数日 重要日期倒计时提醒

倒计时日期 桌面倒数日 重要日期倒计时提醒

在工作、学习、生活中，我们往往会有很多重要的日子需要我们去标记。在工作中的季度考核、学习中的关键时间点、生活中的各种纪念日……等等，都需要我们去对未来这些重要的时间节点做一个倒计时提醒。 日期倒计时让我们对未来的时间，有一个非…
阅读更多...
Kafka入门到精通(一)-安装Scala

Kafka入门到精通(一)-安装Scala

Scala 简介 Scala 是 Scalable Language 的简写，意味着这种语言设计上支持大规模软件开发，是一门多范式的编程语言，Scala 语言是由 Martin Odersky 等人在 2003 年开发的，并于 2004 年首次发布。Scala 运行于 Java 平台&#xff0…
阅读更多...
应用案例 | Panorama SCADA：开创性的铁路电气控制系统

应用案例 | Panorama SCADA：开创性的铁路电气控制系统

案例概况 客户：英国铁路网运营商Network Rail 合作伙伴：Telent Technology Services Ltd 应用：实现对铁路牵引电网的高效管理与精准控制 应用产品：宏集Panorama E2 SCADA系统 一、应用背景 英国铁路网运营商Network Rail计划…
阅读更多...
QT中子工程的创建，以及如何在含有库的子工程项目中引用主项目中的qt资源

QT中子工程的创建，以及如何在含有库的子工程项目中引用主项目中的qt资源

1、背景 在qt中创建多项目类型，如下： CustomDll表示其中的一个动态库子项目； CustomLib表示其中的一个静态库子项目； MyWidget表示主项目窗口(main函数所在项目)； 2、qrc资源的共享 如何在CustomDll和CustomLib等子项目中也同样使用 MyWidget项目中的qrc资源呢？？？ 直…
阅读更多...
基于STM32的简易智能家居设计

基于STM32的简易智能家居设计

一、项目功能概述 1、OLED显示温湿度、空气质量，并可以设置报警阈值 2、设置4个继电器开关，分别控制灯、空调、开关、风扇 3、设计一个离线语音识别系统，可以语音控制打开指定开关、并且可以显示识别命令词到OLED屏上 4、OLED实时显示&#…
阅读更多...
【02-02】SpringMVC基于注解的应用

【02-02】SpringMVC基于注解的应用

一、请求处理 1、常用注解 RequestMapping 作用：用来匹配客户端发送的请求（用来处理URL映射，将请求映射到处理方法中），可以在类或者方法上使用。 用在类上，可以将请求模块化，避免请求方法中的…
阅读更多...
机器学习 中数据是如何处理的？

机器学习 中数据是如何处理的？

数据处理是将数据从给定形式转换为更可用和更理想的形式的任务，即使其更有意义、信息更丰富。使用机器学习算法、数学建模和统计知识，整个过程可以自动化。这个完整过程的输出可以是任何所需的形式，如图形、视频、图表、表格、图像等等&#…
阅读更多...
vscode python pip : 无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

vscode python pip : 无法将“pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

在vscode中控制台运行python文件出现：无法将"pip”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 使用vscode开发python，需要安装python开发扩展： 本文已经安装，我们需要找的是python安装所在目录，本文…
阅读更多...
css持续学习

css持续学习

一、样式层叠 当一个css样式发生冲突时，比如多处给一个字体设置了不同的颜色，这个时候就需要样式层叠了，它会进行三种比较 比较重要性 重要性从高到低： 1.带有 important 的作者样式（作者样式就是开发者写的样式&…
阅读更多...
【渗透工具】Nuclei POC—整合全网Nuclei的漏洞POC

【渗透工具】Nuclei POC—整合全网Nuclei的漏洞POC

1. 免责申明 本公众号的技术文章仅供参考，此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等（包括但不限于）进行检测或维护参考，未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信…
阅读更多...
创纪录！沃飞长空完成新一轮融资，实力获资方认可

创纪录！沃飞长空完成新一轮融资，实力获资方认可

作为全球竞逐的战略性新兴产业，今年首次写入政府工作报告的“低空经济”热度正持续提升，在政策、产业等多个层面均有重大突破。行业的飞速发展也吸引了投资界的目光，越来越多资本正投向低空经济。 近期，国内领先的低空出行企业吉…
阅读更多...
CSS Grid网格布局

CSS Grid网格布局

一、前言 二、Grid布局 1、基本介绍 2、核心概念 （1）网格容器 （2）网格元素 （3）网格列 （4）网格行 （5）网格间距 （6）网格线 三…
阅读更多...
UE4_材质_水涟漪、水深制作_Ben教程

UE4_材质_水涟漪、水深制作_Ben教程

学习笔记，不喜勿喷！侵权立删，祝愿生活越来越好！ 效果图如下： 创建水材质的教程，首先需要外出收集一些参考，看一看你将要做的事情很重要，确定将要模仿物体的关键属性，从这…
阅读更多...
基于Java中的SSM框架实现后台资金管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现后台资金管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现后台资金管理系统演示 摘要 互联系统的技术在如今的社会中，应用的越来越广泛，通过互联系统我们可以更方便地进行办公，也能够在系统上就能处理很多日常的事务。通过互联系统的发展和使用，让更多的人&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023