在前端开发中，我们经常使用 Promise 实现异步操作。而 Promise 对象提供的 then 和 catch 方法是我们常用的操作。这两个函数在 Promise 链中起到了很重要的作用。但是在实际开发中，可能会遇到 Promise 的 catch 方法失效的情况。
Promise 中的 then 方法与 catch 方法
Promise 对象可以看做是一种异步计算的"容器"，在 Promise 对象中我们可以使用 then 方法添加在 Promise 异步操作执行完毕后的回调函数。同时，Promise 对象中提供的 catch 方法可以用来处理 Promise 中的错误信息。
通常情况下，我们会先使用 then 方法进行异步操作的执行，然后使用 catch 方法来处理异步操作中可能出现的错误。如下面这个例子：
-------- -------------- -
------ --- ----------------- ------- -- -
------------- -- -
---------------- -----------
-- ------
---
-
------------------------------ -- -
----------------------
---------------- -- -
-------------------- ---------
---在上面的例子中，我们通过 then 方法处理异步操作的成功状态，通过 catch 方法处理异步操作的失败状态。
catch 方法失效的原因
然而，在实际开发中，有时候我们会遇到 Promise 中的 catch 方法失效的情况。通常这是因为在 Promise 链中出现了代码执行顺序的问题。
下面是一个例子，让我们看一下 catch 方法失效的情况：
-------- -------------- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- ----------
-- ------
---
-
------------------------------ -- -
----------------------
----- --- ----------------
---------------- -- -
-------------------
---在上述代码中，我们在 then 方法中使用 throw 关键字抛出了一个错误。而因为 throw 抛出的错误在链式调用中没有被处理，所以这个错误便会在 catch 方法中被处理。但是，我们会发现代码执行后，并没有输出错误信息。
这是因为在上面的例子中，我们在 then 方法中抛出了一个错误，但是这个错误没有被 catch 捕获到。当这里发生错误时，程序会先去执行 catch 方法，而在上面例子中，因为这里的错误被抛出后，程序进入了一个未知状态，导致 catch 方法没有机会执行，导致无法输出错误信息。
解决方案
我们可以通过在 Promise 对象的最后添加 catch 方法，来避免这种情况的发生。
-------- -------------- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- ----------
-- ------
---
-
------------------------------ -- -
----------------------
----- --- ----------------
---------------- -- -
-------------------
---------------- -- -
-------------------- ---------
---在上述代码中，我们在 Promise 对象的最后添加了一个 catch 方法，这样就可以避免之前的错误没有被处理掉而导致 catch 方法失效的问题。因此，在我们开发中，无论是使用 Promise 对象中的 then 方法还是 catch 方法，我们始终要保证 Promise 链式调用的顺序，以避免因顺序不当而导致 Promise 中的 catch 方法失效问题的出现。
结论
Promise 中的 catch 方法失效往往是由于 Promise 对象的调用顺序不当引起的。我们可以通过在 Promise 对象链的最后添加 catch 方法来避免这种情况的发生。
在实际开发中通过使用 Promise 对象中的 then 和 catch 方法来实现异步操作，是我们经常用到的方法。因此，在我们使用 Promise 对象的时候，我们更需要重视 Promise 对象的使用技巧，以避免出现类似 catch 方法失效的这种问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672196e32e7021665e081b37