6. 异步错误处理
浏览器中的异步包括定时器、事件、Promise 等 。异步世界中的错误处理与同步世界中的处理不同 。下面来看一些例子 。
(1)定时器的错误处理
上面我们介绍了如何使用 try/catch/finally 来处理错误,那异步中可以使用这些来处理错误吗?先来看一个例子:
function failAfterOneSecond() {setTimeout(() => {throw Error("Wrong!");}, 1000);
此函数在大约 1 秒后会抛出错误 。那处理此异常的正确方法是什么?以下代码是无效的:
function failAfterOneSecond() {setTimeout(() => {throw Error("Wrong!");}, 1000);try {failAfterOneSecond();} catch (error) {console.error(error.message);
我们知道,try/catch是同步的,所以没办法这样来处理异步中的错误 。当传递给 setTimeout的回调运行时,try/catch 早已执行完毕 。程序将会崩溃,因为未能捕获异常 。它们是在两条路径上执行的:
A: --> try/catchB: --> setTimeout --> callback --> throw(2)事件的错误处理
我们可以监听页面中任何 html 元素的事件,DOM 事件的错误处理机制遵循与任何异步 Web API 相同的方案 。
来看下面的例子:
const button = document.querySelector("button");button.addEventListener("click", function() {throw Error("error");
这里,在单击按钮后立即抛出了异常,我们该如何捕获这个异常呢?这样写是不起作用的,也不会阻止程序崩溃:
const button = document.querySelector("button");try {button.addEventListener("click", function() {throw Error("error");} catch (error) {console.error(error.message);
与前面的 setTimeout 例子一样,任何传递给 addEventListener 的回调都是异步执行的:
Track A: --> try/catchTrack B: --> addEventListener --> callback --> throw
如果不想让程序崩溃,为了正确处理错误,就必须将 try/catch 放到 addEventListener 的回调中 。不过这样做并不是最佳的处理方式,与 setTimeout 一样,异步代码路径抛出的异常无法从外部捕获,并且会使程序崩溃 。
下面会介绍 Promises 和 async/await 是如何简化异步代码的错误处理的 。
(3)onerror
HTML 元素有许多事件处理程序,例如 onclick、onmouseenter、onchange 等 。除此之外,还有 onerror,每当标签或
推荐阅读
- 血龙木是化学处理的木头吗 巴西龙血树的养殖方法
- 如何处理手机屏幕的划痕
- 废弃口罩的正确处理方式
- 如何处理人与自然界的关系
- 轻度发霉大米如何处理
- 戴尔笔记本开不了机怎么解决 戴尔电脑开不了机是什么原因?怎么处理
- 小乌龟溺水处理后应该怎么养 乌龟溺水了救活后该怎么调理
- 710a和710有什么区别?麒麟710a处理器很差吗?
- i7处理器的macbookpro 顶配的macbook pro
- 如何处理与老师之间的关系
