JavaScript Promise 的 then 不执行原因及其解决方法
前言
在前端开发的过程中，经常会使用到 Promise 进行异步操作的处理。然而，在使用 Promise 的过程中，我们有时候会遇到一个非常奇怪的问题：Promise 的 then 方法没有执行。这时，我们就需要找出原因并解决它。本文将从原因和解决方法两个方面进行介绍。
原因
- 返回一个新的 Promise
使用 then 方法时，如果 then 方法返回了一个新的 Promise，那么当前 Promise 的状态就会依赖于新的 Promise 的状态。如果新的 Promise 还没有被 resolve，那么当前 Promise 的状态就不会改变，then 方法也不会执行。
示例代码如下：
-- -------------------- ---- -------
----- - - --- ----------------- ------- -- -
------------- -- -
-------------- -------
-- -----
--
---------- -- -
------ --- ----------------- ------- -- -
-- ---- - ----
------------- -- -
--------------- ---- --- ---------
-- -----
--
----------- -- -
---------------- -- --------
--这段代码中，第一个 then 方法返回了一个新的 Promise，这个 Promise 要延迟 2 秒才能 resolve。因此，第二个 then 方法不会执行，因为当前 Promise 还没有被 resolve。
- then 方法中抛出了异常
如果在 then 方法中抛出了异常，那么当前 Promise 的状态就会变成 rejected 状态，then 方法也不会执行。
示例代码如下：
-- -------------------- ---- -------
----- - - --- ----------------- ------- -- -
------------- -- -
-------------- -------
-- -----
--
---------- -- -
----- --- ---------------- -- ---- --------
----------- -- -
---------------- -- --------
-------------- -- -
-------------------------- -- --------- -- ---- ------
--这段代码中，第一个 then 方法中抛出了异常，因此第二个 then 方法不会执行，但是会执行 catch 方法。
解决方法
- 使用 catch 方法捕获异常
我们可以在 Promise 的链式调用中添加一个 catch 方法，来捕获异常。这样即使在 then 方法中发生了异常，也能够被捕获到，不至于阻止 Promise 链式调用的执行。
示例代码如下：
-- -------------------- ---- -------
----- - - --- ----------------- ------- -- -
------------- -- -
-------------- -------
-- -----
--
---------- -- -
----- --- ---------------- -- ---- --------
-------------- -- -
-------------------------- -- --------- -- ---- ------
----------- -- -
---------------- -- ------
--这段代码中，我们在 Promise 链式调用中添加了一个 catch 方法，在抛出异常的时候，异常被捕获到了 catch 方法中，并输出了相应的提示。然后，后面的 then 方法正常执行。
- 在返回 Promise 的时候，确保 Promise 能够被 resolve
当我们在 then 方法中返回一个 Promise 的时候，必须确保这个 Promise 在未来一定能够被 resolve，否则就会出现 Promise 链式调用中出现 then 方法执行不到的情况。可以对 Promise 进行模拟处理，进行 resolve 或 reject 调用。
示例代码如下：
-- -------------------- ---- -------
----- - - --- ----------------- ------- -- -
------------- -- -
-------------- -------
-- -----
--
---------- -- -
------ --- ----------------- ------- -- -
------------- -- -
-- -------------- - ---- -
--------------- ---- --- ---------
- ---- -
---------- ------------- --------
-
-- -----
--
----------- -- -
---------------- -- ------
-------------- -- -
-------------------------- -- --------
--这段代码中，第一个 then 方法返回了一个新的 Promise，在新的 Promise 中，我们使用了 Math.random() 模拟随机情况，看看当前 Promise 会被 resolve 还是 reject。如果 resolve，则后面的 then 方法正常执行；如果 reject，则后面的 catch 方法能够把错误信息输出。
结论
Promise 在使用过程中，由于一些细节问题，可能会导致 then 方法无法执行。因此，在进行链式调用的时候，需要遵守一些约定，以保证 Promise 的正常执行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6707c921d91dce0dc86c7ef4