在我们日常的前端开发中，Promise 已经成为了必不可少的一部分。在 Promise 的中，then 方法被广泛使用。但是在使用的过程中，我们是否了解 then 方法的返回值对后续调用的影响呢？本文将详细介绍 Promise 中 then 方法的返回值，以及如何正确地使用它。
then 方法的返回值
在使用 Promise 的 then 方法时，我们都知道它可以用来注册成功和失败的回调函数，同时 then 方法也返回了一个新的 Promise 对象，用于处理后续的逻辑。
但是，我们可能并不太清楚这个新的 Promise 对象是如何生成的。实际上，then 方法的返回值是由传入的回调函数的返回值决定的。
如果 then 方法中传递的回调函数没有返回任何值，默认返回一个状态为 fulfilled 的 Promise 对象。同时，如果回调函数返回一个非 Promise 类型的值，则会自动将这个值转换为一个 fulfilled 状态的 Promise 对象，并被传递给下一个 then 方法。
下面是一个简单的示例代码：
-- -------------------- ---- ------- ----- - - --- --------------- -- - ----------------- --- ------------ -- - ------------------- -- ---------- --- ------------ -- - --------------------------------- -- ---------- --- --------- -- - ------ -------- ------------- -- - ------------------- -- ---------- ---
在这个示例中，我们通过 Promise 的 resolve 方法返回了一个值为 'Hello' 的 Promise 对象。然后我们在 then 方法中注册了三个回调函数，并在第二个回调函数中将字符串转换成了大写。最后一个回调函数返回了字符串 'World'。从结果可以看到，每个回调函数的返回值都成功地地传递给了下一个 then 方法。
如何正确使用 then 方法的返回值
虽然 then 方法的返回值可以有效地传递值给下一个 then 方法，但是需要注意的是，如果回调函数返回了一个新的 Promise 对象，则并不会直接传递给下一个 then 方法，而是会将这个新的 Promise 对象的状态和值先保留起来，并在新的 Promise 对象被 resolved 或 rejected 之后再传递给下一个 then 方法。
这意味着，如果我们像下面这样使用 then 方法的返回值，可能会出现一些奇怪的问题：
-- -------------------- ---- -------
----- - - --- --------------- -- -
-----------------
---
------------ -- -
-------------------
---
------------ -- -
------ --- --------------- -- -
------------- -- -
-----------------------------
-- ------
---
------------- -- -
-------------------
---在这个示例中，我们在第二个回调函数中返回了一个新的 Promise 对象，并使用了一个 setTimeout 来模拟异步操作。然后我们在下一个 then 方法中打印了这个 Promise 的结果。
但是，从结果中可以看到，第二个 then 方法的回调函数没有被执行，而是直接跳到了最后一个 then 方法。这是因为返回的 Promise 对象并没有被 resolved 或 rejected，所以这个 then 方法不能正确的拿到返回值。
为了避免这个问题，我们需要使用 Promise 的另一个方法 —— Promise.resolve 或 Promise.reject 来包装返回值，将其转换为 Promise 并进行正确的传递。
下面是修改后的示例代码：
-- -------------------- ---- -------
----- - - --- --------------- -- -
-----------------
---
------------ -- -
-------------------
---
------------ -- -
------ ------------------------- -- -
------ --- --------------- -- -
------------- -- -
-----------------------------
-- ------
---
---
------------- -- -
-------------------
---使用 Promise.resolve 包装返回值后，我们可以确保返回值总是能被正确地传递给下一个 then 方法，并且能够在异步操作完成后正确地执行回调函数，从而得到正确的结果。
结论
在使用 Promise 的 then 方法时，我们需要注意它的返回值对后续调用的影响。正确理解和使用 then 方法的返回值，能够帮助我们更好地处理 Promise 相关的异步操作，并提高程序的可读性和可维护性。
希望本文能对大家进行相应的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d7f86d773cf2d54cf8607