前言
Promise 的引入，让 JavaScript 中的异步编程变得简单不少。但是在使用过程中，我们经常会遇到在 then 链中出现 Uncaught Error 的情况。这不仅会导致代码出现异常，同时也会产生一些无法预知的问题。那么如何来解决这个问题呢？
问题分析
在 Promise 的 then 链中，如果任何一个 then 函数中抛出了异常，并且链中没有对该异常进行 catch，则该异常会透传到链的尾端，并且会出现 Uncaught Error。
例如，下面的代码中，假设 promise1 和 promise2 的状态都是 resolved，则 code1 会正常执行，但是在 code2 中，由于 foo() 抛出了异常，并且没有进行 catch，则该异常会透传到链尾端，产生 Uncaught Error。
-- -------------------- ---- ------- ---------------- -- - -- ----- ---------- -- - -- ----- ------ ---------- -- - -- ----- -------------- -- - -- ---- ---
因此，要避免出现 Uncaught Error，我们需要在 Promise 的 then 链中，对每一个 then 函数中抛出的异常进行 catch 处理。
解决方案
1. 在每个 then 函数中 catch 异常
这是一种最直观、最简单的方法。我们可以在每个 then 函数之后添加一个 catch 函数，用于捕获该函数中可能会抛出的异常。
例如，下面的代码中，在 code2 之后添加了一个 catch 函数，用于捕获该函数中可能会抛出的异常，并进行处理。
-- -------------------- ---- ------- ---------------- -- - -- ----- ---------- -- - -- ----- ------ -------------- -- - -- ---- ---------- -- - -- ----- -------------- -- - -- ---- ---
这种方法可以确保代码的稳定性，但是会导致 then 链变得复杂，降低代码的可读性。
2. 在链尾部统一 catch 异常
我们可以在 then 链的最后添加一个 catch 函数，用于统一捕获链中所有 then 函数的异常。
例如，下面的代码中，在该 Promise 的 then 链尾部添加了一个 catch 函数，用于统一捕获该链中所有可能会抛出的异常。
-- -------------------- ---- ------- ---------------- -- - -- ----- ---------- -- - -- ----- ------ ---------- -- - -- ----- -------------- -- - -- ---- ---
这种方法可以确保代码的可读性，但是需要注意，如果链中的某一个 then 函数中抛出了异常，并且已经在该函数中进行了 catch，则该异常不会透传到链尾，并且也不会被统一捕获。
3. 使用 async/await
async/await 是 ES2017 引入的新特性，可以让异步编程变得更加简单。通过使用 async/await，我们可以避免出现 then 链中的 Uncaught Error。
例如，下面的代码中，如果 foo() 抛出了异常，则该异常会被 async 函数捕获。
-- -------------------- ---- -------
------ ---------- -
--- -
----- ---------
-- -----
----- ---------
-- -----
----- ------
-- -----
- ----- ----- -
-- ----
-
-----这种方法可以让代码更加简洁、易读、易于维护，并且避免了出现 Uncaught Error 的问题。
示例代码
最后，附上一个示例代码，用于演示在 then 链中抛出异常并处理的情况。
-- -------------------- ---- ------- --- ------- - --- ----------------- ------- -- - -------------------- ---------- ---------- --- --------------- -- - ------------------ ---------- ----- --- ----------------- -------- -------------- -- - ------------------ ------ -- -------- ------------------- ---------- -- - ------------------ ---------- -------------- -- - ------------------ ------ -- -------- ------------------- ---
当执行该程序时，我们可以看到以下输出：
Promise started
then1 started
then1 caught an error
Error: Unexpected error
at Promise.then (...)
then2 started从输出结果中可以看出，我们成功地捕获了 then2 中抛出的异常，并且输出了对应的错误信息。
总结
通过本文的介绍，我们了解了 Promise 的 then 链中出现 Uncaught Error 的原因，并分析了解决问题的方法。在实际开发中，我们应该尽可能地避免出现 Uncaught Error 的情况，并且让代码更加稳定和易于维护。同时，我们也介绍了 async/await 的使用，并强烈推荐读者在实际开发中使用这种更加简便的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb173ef6b2d6eab35be654