iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript 错误处理的解决过程是怎样的
  • 140
分享到

JavaScript 错误处理的解决过程是怎样的

2024-04-02 19:04:59 140人浏览 八月长安
摘要

本篇文章为大家展示了javascript 错误处理的解决过程是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。什么是编程中的错误我们的开发过程中并不总是一帆风顺

本篇文章为大家展示了javascript 错误处理的解决过程是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

什么是编程中的错误

我们的开发过程中并不总是一帆风顺。特别是在某些情况下,我们可能希望停止程序或在发生不良情况时通知用户。

在类似这些情况下,我们可以自己写个自定义的错误来管理,或者直接让引擎为我们去定义这些错误。有了错误定义后,我们可以用消息通知用户,或者停止执行程序的运行。

JavaScript 中的错误是什么

JavaScript中的错误是一个对象。要在 js 创建一个错误,可以使用 Error 对象,如下所示:

const err = new Error('霍霍,好像哪里出问题了!')

也可以省略new关键字:

const err = Error('霍霍,好像哪里出问题了!')

创建,错误对象有三个属性:

  • message:带有错误消息的字符串

  • name:错误的类型

  • stack:函数执行的堆栈跟踪

例如,我们使用 TypeError 对象创建一个错误,对应的 message 是创建的传入的字符号,name 是 "TypeError"

const wrongType = TypeError("霍霍,好像哪里出问题了!") wrongType.message // "霍霍,好像哪里出问题了!" wrongType.name // "TypeError"

JavaScript中的许多类型的错误

JavaScript 中有很多类型的错误 ,如:

  • Error

  • EvalError

  • InternalError

  • RangeError

  • ReferenceError

  • SyntaxError

  • TypeError

  • URIError

记住,所有这些错误类型都是实际的构造函数,意味着返回一个新的错误对象。

在我们的代码中,主要还是使用Error和TypeError这两种最常见的类型来创建自己的错误对象 。

大多数时候,大多数错误将直接来自JavaScript引擎,例如InternalError或SyntaxError。

如果你重新赋值给 const 声明的变量时,就会引发 TypeError 错误。

const name = "前端小智" name = "王大冶" // // TypeError: Assignment to constant variable.

SyntaxError 错误一般是关键字打错了,如下所示:

va x = '33'; // SyntaxError: Unexpected identifier

或者,当在错误的地方使关键字时,例如await 和 async 的使用:

function wrong(){     await 99; }wrong();// SyntaxError: await is only valid in async function

另一个TypeError的例子是,在页面操作不存在的 DOM 元素。

Uncaught TypeError: button is null

除了这些内置错误外,在浏览器中还有:

  • DOMException

  • DOMError,现在已经废弃,不再使用了。

DOMException是与 WEB api 相关的一系列错误。当我们在浏览器中执行愚蠢的操作时,它们会被抛出,例如:

document.body.appendChild(document.clonenode(true));

结果:

Uncaught DOMException: Node.appendChild: May not add a Document as a child

什么是异常?

大多数开发人员认为错误和异常是一回事。实际上,错误对象只有在抛出时才会变成异常。

要在JavaScript中引发异常,我们使用throw 关键字把错误抛出去:

const wrongType = TypeError("霍霍,好像哪里出问题了!") throw wrongType;

简写形式:

throw TypeError("霍霍,好像哪里出问题了!")

或者

throw new TypeError("霍霍,好像哪里出问题了!")

在函数体或者条件之外抛出异步的可能性不大,考虑下面的例子:

function toUppercase(string) {   if (typeof string !== "string") {     throw TypeError("霍霍,好像哪里出问题了!");   }  return string.toUpperCase(); }

这里我们检查函数参数是否为字符串。如果不是,我们抛出一个异常。从技术上讲,JavaScript中可以抛出任何东西,而不仅仅是错误对象

throw Symbol(); throw 33; throw "Error!"; throw null;

但是,最好避免这些事情:始终抛出正确的错误对象,而不是一些基本类型。

这样有助于在代码中,错误处理的一致性。其他成员可以期望在错误对象上访问error.message或error.stack 来知道错误的源头。

当我们抛出异常时会发生什么?

异常就像一个上升的电梯:一旦你抛出一个,它就会在程序堆栈中冒泡,除非它在某个地方被捕获。

考虑以下代码:

function toUppercase(string) {   if (typeof string !== "string") {     throw TypeError("参数类型需要是 string 的");   }  return string.toUpperCase(); }toUppercase(4);

运行代码会在控制台看到:

Uncaught TypeError: Wrong type given, expected a string     toUppercase Http://localhost:5000/index.js:3     <anonymous> http://localhost:5000/index.js:9

可以看到发生错误的确切行。

这个报告是一个堆栈跟踪,它有助于跟踪代码中的问题。堆栈跟踪从下至上:

toUppercase http://localhost:5000/index.js:3    <anonymous> http://localhost:5000/index.js:9

除了在浏览器的控制台中看到此堆栈跟踪外,还可以通过错误对象的stack属性进行查看。

如果异常未被捕获,也就是说,程序员不采取任何措施来捕获它,程序将崩溃。

何时何地捕获代码中的异常取决于特定的用例。

例如,我们可能想在堆栈中传递一个异常,以使程序完全崩溃。这种情况发生在, 让错误停止程序比处理无效数据来得更安全

接下来,我们来看看 JavaScript 同步和异步中的错误和异常处理。

同步中的错误处理

同步代码在大多数情况下都很简单,因此它的错误处理也很简单。

常规函数的错误处理

同步代码的执行顺序与写入顺序相同。我们再看一下前面的例子:

function toUppercase(string) {   if (typeof string !== "string") {     throw TypeError("参数类型需要是 string 的");   }  return string.toUpperCase(); }toUppercase(4);

在这里,引擎调用并执行toUppercase。所有这些都是同步发生的。要捕获同步函数引发的异常,我们可以使用try/catch/finally:

try {   toUppercase(4); } catch (error) {   console.error(error.message); } finally { }

try/catch/finally是一个同步结构,但它也可以捕获异步出现的异常。

使用 generator 函数来处理错误

JavaScript中的生成器函数是一种特殊的函数。除了在其内部作用域和使用者之间提供双向通信通道之外,还可以随意暂停和恢复。

要创建一个生成器函数,我们在function关键字后面放一个*:

function* generate() {   // }

在函数内可以使用yield返回值:

function* generate() {   yield 33;   yield 99; }

生成器函数的返回值是一个迭代器对象(iterator object)。要从生成器中提取值,我们可以使用两种方法:

  • 使用 next() 方法

  • 通过 for...of 遍历

如下所示,要想在生成器中获取值,我们可以这样做:

function* generate() {   yield 33;   yield 99; }const Go = generate(); const firstStep = go.next().value; // 33 const secondStep = go.next().value; // 99

成器也可以采用其他方法工作:它们可以接收调用者返回的值和异常。

除了next()之外,从生成器返回的迭代器对象还具有throw()方法。使用这种方法,我们可以通过向生成器中注入一个异常来停止程序:

function* generate() {   yield 33;   yield 99; }const go = generate(); const firstStep = go.next().value; // 33 go.throw(Error("我要结束你!")); const secondStep = go.next().value; // 这里会抛出异常

要获取此错误,可以在生成器函数中使用 try/catch/finally:

function* generate() {   try {     yield 33;     yield 99;   } catch (error) {     console.error(error.message);   }}

下面这个事例是使用 for...of 来获取 生成器函数中的值:

function* generate() {   yield 33;   yield 99;     throw Error("我要结束你!") }try {   for (const value of generate()) {     console.log(value)   }} catch (error) {   console.log(error.message) }

异步中的错误处理

JavaScript本质上是同步的,是一种单线程语言。

诸如浏览器引擎之类的宿主环境使用许多Web API, 增强了 JS 以与外部系统进行交互并处理与 I/O 绑定的操作。

浏览器中异步操作有:定时器相关的函数、事件和 Promise。

异步中的错误处理不同于同步的错误处理。我们来看一些例子。

定时器的错误处理

考虑下面的代码片段:

function failAfterOneSecond() {   setTimeout(() => {     throw Error("Something went wrong!");   }, 1000); }

这个函数大约在1秒后抛出异常,处理这个异常的正确方法是什么?

下面的方法不起作用:

function failAfterOneSecond() {   setTimeout(() => {     throw Error("Something went wrong!");   }, 1000); }try {   failAfterOneSecond();} catch (error) {   console.error(error.message); }

我们知道 try/catch 是同步,而 setTimeout 是异步的。当执行到 setTimeout回调时,try/catch  早已跑完了,所以异常就无法捕获到。

它们在两务不同的轨道上:

Track A: --> try/catch Track B: --> setTimeout --> callback --> throw

如果能让程序跑下去,把 try/catch 移动到 setTimeout 里面。但这种做法意义不大,后面我们会使用 Promise  来解决这类的问题。

事件中错误处理

DOM  的事件操作(监听和触发),都定义在EventTarget接口。Element节点、document节点和window对象,都部署了这个接口。此外,XMLHttpRequest、AudioNode、Audiocontext等浏览器内置对象,也部署了这个接口。该接口就是三个方法,addEventListener和removeEventListener用于绑定和移除监听函数,dispatchEvent用于触发事件。

DOM 事件的错误处理机制遵循任何异步Web API的相同方案。

考虑下面示例:

const button = document.querySelector("button"); button.addEventListener("click", function() {   throw Error("Can't touch this button!"); });

在这里,单击按钮后立即引发异常。我们如何抓住它?下面这种方式没啥作用,也不会阻止程序崩溃:

const button = document.querySelector("button"); try {   button.addEventListener("click", function() {     throw Error("Can't touch this button!");   });} catch (error) {   console.error(error.message); }

与 setTimeout 一样,addEventListener 也是异步执行的。

Track A: --> try/catch Track B: --> addEventListener --> callback --> throw

如果能让程序跑下去,把 try/catch 移动到 addEventListener 里面。但这种做法意义不大,后面我们会使用 Promise  来解决这类的问题。

onerror 怎么样

html元素具有许多事件处理程序,例如onclick,onmouseenter,onchange等,当然还有 onerror。

当 img 标签或 script 标签遇到不存在的资源时,onerror事件处理程序都会触发。

考虑下面示例:

... <body>   <img src="nowhere-to-be-found.png" alt="So empty!"> </body> ...

当文件不存在时,控制台就会报如下的错误:

GET http://localhost:5000/nowhere-to-be-found.png [HTTP/1.1 404 Not Found 3ms]

在 JS 中,我们可以通过 onerror 来捕获这个错误:

const image = document.querySelector("img"); image.onerror = function(event) {   console.log(event); };

更好的方式:

const image = document.querySelector("img"); image.addEventListener("error", function(event) {   console.log(event); });

这种方式对于一些请求资源丢失的情况很有用,但 onerror 与 throw 与 try/cathc 无关。

上述内容就是JavaScript 错误处理的解决过程是怎样的,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网JavaScript频道。

--结束END--

本文标题: JavaScript 错误处理的解决过程是怎样的

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript 错误处理的解决过程是怎样的
    本篇文章为大家展示了JavaScript 错误处理的解决过程是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。什么是编程中的错误我们的开发过程中并不总是一帆风顺...
    99+
    2024-04-02
  • JavaScript开发中常见错误解决是怎样的
    JavaScript开发中常见错误解决是怎样的,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。身为一名前端打工人,当然是经验越多,在排查错误...
    99+
    2024-04-02
  • nodejs的错误处理过程记录
    本文以连接错误ECONNREFUSED为例,看看nodejs对错误处理的过程。 假设我们有以下代码 1. const net = require('net'); 2. n...
    99+
    2024-04-02
  • ASP.NET的请求处理过程是怎样的
    这篇文章主要介绍“ASP.NET的请求处理过程是怎样的”,在日常操作中,相信很多人在ASP.NET的请求处理过程是怎样的问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ASP.NET的请求处理过程是怎样的”的疑...
    99+
    2023-06-17
  • VB.NET错误的解决方案是怎么样
    本篇文章给大家分享的是有关VB.NET错误的解决方案是怎么样,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。虽然VB.NET这款语言的结构清晰,代码简介灵活,但是操作性并不是很简...
    99+
    2023-06-17
  • JavaScript 错误处理中的源映射:简化调试过程
    ...
    99+
    2024-04-02
  • Linux内核处理中断的过程是怎样的
    Linux内核处理中断的过程是怎样的,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。中断是现代 CPU 工作方式中重要的部分。例如:当你每次在键盘上按下一个按键后,CPU 会...
    99+
    2023-06-28
  • AJAX乱码及错误解决方案是怎样的
    本篇文章给大家分享的是有关AJAX乱码及错误解决方案是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。一类是出现乱码,另外一类是出现jav...
    99+
    2024-04-02
  • Rust是怎么处理错误的
    本文小编为大家详细介绍“Rust是怎么处理错误的”,内容详细,步骤清晰,细节处理妥当,希望这篇“Rust是怎么处理错误的”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。异常的演进程序在运行的过程中,总是会不可避免地...
    99+
    2023-07-04
  • ASP.NET对请求处理过程的操作是怎样的
    本篇内容介绍了“ASP.NET对请求处理过程的操作是怎样的”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!当请求一个*.aspx文件的时候,这...
    99+
    2023-06-17
  • JavaScript错误处理的常见错误和陷阱
    在JavaScript开发中,错误处理是很重要的一个环节,错误处理一般通过try…catch语句来实现。try语句块中放置要执行的代码,catch语句块中放置要处理的异常。当try语句块中出现异常时,JavaScript引擎会自动执行ca...
    99+
    2024-02-27
    JavaScript 错误处理 try catch 异常
  • php实现ffmpeg处理视频的过程是怎样的
    本篇文章给大家分享的是有关php实现ffmpeg处理视频的过程是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。最近有一个项目需要使用ffmpeg处理视频,这里我写了一个d...
    99+
    2023-06-22
  • javascript事件处理的过程是什么
    本文小编为大家详细介绍“javascript事件处理的过程是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript事件处理的过程是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,...
    99+
    2024-04-02
  • 怎样处理Golang常见的错误类型
    Golang作为一门高效、简洁的编程语言,其错误处理机制也是非常强大的。在实际编码过程中,我们经常会遇到各种各样的错误类型,如文件读写错误、网络连接错误、数据格式错误等。本文将介绍Go...
    99+
    2024-02-28
    错误处理 异常处理 golang错误
  • Go程序员踩过的defer坑错误处理
    目录前言一、简单的例子二、一定不要在 for 循环中使用 defer 语句三、定义函数时就不要使用命名返回值四、defer 表达式的...
    99+
    2024-04-02
  • CentOS yum段错误core dumped解决方法是怎样的
    本篇文章给大家分享的是有关CentOS yum段错误core dumped解决方法是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。今天在yum install 或者yum...
    99+
    2023-06-10
  • JavaScript 错误处理中的常见陷阱:及其解决方案
    ...
    99+
    2024-04-02
  • JavaScript 错误处理中的错误边界:隔离和处理异常
    ...
    99+
    2024-04-02
  • Mysql RELICATION对存过的处理是怎样的
    本篇文章给大家分享的是有关Mysql RELICATION对存过的处理是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。昨天鹰眼需求从一个...
    99+
    2024-04-02
  • linux主机中病毒处理过程是怎么样的
    这期内容当中小编将会给大家带来有关linux主机中病毒处理过程是怎么样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。问题现象服务器一直往外大量发包,占用流量和cpu,导致服务器响应很慢甚至无响应,怀疑是...
    99+
    2023-06-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作