Promise 中应该如何处理未捕获的错误产生

阅读时长 5 分钟读完

Promise 是 JavaScript 中的异步编程的一种解决方案。在使用 Promise 进行异步操作时,有时会因为一些错误导致 Promise 返回了 reject 状态而没有得到处理,这被称为“未捕获的错误”。

在实际开发中,未捕获的错误容易被忽略,导致程序的不稳定性,因此处理未捕获的错误是前端开发中的一个重要问题。

未捕获错误的分类

未捕获错误可以分为两种:全局错误和 Promise 错误。

全局错误是指没有被任何代码处理的错误,例如未被 try/catch 包装的代码中的错误。

Promise 错误是指在 promise 中出现的未被 catch 处理的错误。在这种情况下,如果没有正确地处理 Promise 错误,错误将直接进入全局错误处理程序,这使得调试错误变得异常困难。

下面将对这两种错误进行详细介绍。

全局错误

全局错误通常指没有被任何代码处理的错误,例如未被 try/catch 包装的代码中的错误。这些错误会触发浏览器默认的错误处理程序,会在控制台输出错误信息,但不会影响程序的执行。

例如,以下代码中,在 for 循环前未定义变量 i,将导致错误:

如果我们将 i 改为 j,就会在控制台中输出错误信息:

但程序的执行并不受影响:

输出结果为:

Promise 错误

Promise 错误是指在 Promise 中出现的未被 catch 处理的错误。这些错误不会触发浏览器默认的错误处理程序,而是会在 Promise 链中传播,直到被捕获为止。

例如,以下代码中,Promise 中的错误未被 catch 处理,将导致程序输出 “Promise rejected”,但并没有输出错误信息:

-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
  ----- --- -------------- -----------
---

--------------- -- -
  ------------------------
----------- -- -
  -------------------- -----------
---

输出结果为:

处理未捕获错误的方式

在前面的例子中,我们已经看到了未处理全局错误和 Promise 错误的区别。下面将介绍如何处理这两种错误。

处理全局错误

处理全局错误的方式很简单:将代码包装在 try/catch 块中即可。try/catch 块捕获错误后,可以在 catch 块中处理错误并输出错误信息。

例如,以下代码中 try/catch 包装的代码捕获了全局错误,处理后将错误信息输出到控制台:

-- -------------------- ---- -------
--- -
  --- ---- - - -- - - --- ---- -
    ---------------
  -
  ---------------
- ----- ------- -
  ---------------------------
-

--------------------

输出结果为:

处理 Promise 错误

处理 Promise 错误的方式有两种:

方式一:使用 catch 捕获 Promise 错误

Promise 提供了 catch 方法,用于捕获 Promise 链中的错误。

例如,以下代码中,catch 方法可以捕获到 Promise 中的错误并输出错误信息:

-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
  ----- --- -------------- -----------
---

--------------- -- -
  ------------------------
---------------- -- -
  ---------------------------
---

输出结果为:

方式二:使用 window.addEventListener 捕获 Promise 错误

另一种处理 Promise 错误的方式是使用 window 对象的 addEventListener 方法和 unhandledrejection 事件。这种方式可以捕获 Promise 链中的任何未被 catch 捕获的错误。

例如,以下代码中,使用 window.addEventListener 捕获 Promise 中的错误,并输出错误信息:

-- -------------------- ---- -------
--------------------------------------------- ------- -- -
  -----------------------------------
---

----- ------- - --- ----------------- ------- -- -
  ----- --- -------------- -----------
---

--------------- -- -
  ------------------------
---

--------------------

输出结果为:

总结

在使用 Promise 进行异步操作时,处理未捕获的错误是一项重要任务。本文介绍了如何处理未捕获的错误,包括全局错误和 Promise 错误,以及处理这两种错误的方法。

处理全局错误的方式很简单,将代码包装在 try/catch 块中即可。处理 Promise 错误的方式有两种,一种是使用 catch 方法捕获 Promise 链中的错误,另一种是使用 window.addEventListener 方法和 unhandledrejection 事件捕获 Promise 链中的任何未被 catch 捕获的错误。

处理未捕获的错误可以帮助我们提高程序的可靠性和稳定性,避免因错误导致程序出现异常。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64b3092448841e9894f3c5a6

纠错
反馈