关于 JavaScript 错误处理的最完整指南(上半部)

前端小智 2020/9/15 14:04:03

作者:Valentino Gagliardi译者:前端小智来源:valentinog点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。大家都说简历…
作者:Valentino Gagliardi
译者:前端小智
来源:valentinog
点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】。

什么是编程中的错误

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

例如:

  • 程序试图打开一个不存在的文件、
  • 网络连接断开
  • 用户输入了无效字符

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

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

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

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

大多数时候,大多数错误将直接来自JavaScript引擎,例如InternalErrorSyntaxError

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

const name = "前端小智"
name = "王大冶"

// // TypeError: Assignment to constant variable.

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

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

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

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.messageerror.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)
}

/* 输出:
  33
  99
  我要结束你!
*/

异步中的错误处理

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、AudioNodeAudioContext等浏览器内置对象,也部署了这个接口。该接口就是三个方法,addEventListenerremoveEventListener用于绑定和移除监听函数,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元素具有许多事件处理程序,例如onclickonmouseenteronchange等,当然还有 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);
});

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


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文:https://www.valentinog.com/bl...

交流

文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[关于 JavaScript 错误处理的最完整指南(上半部)]http://www.zyiz.net/tech/detail-147057.html

上一篇:推荐一个学习的网站,学习、资源、工具、电子书、影视、资讯、还有强大的搜索!

下一篇:「1.8W字」一份不可多得的 TS 学习指南

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程