Promise 是 JavaScript 中异步编程的基础，它能够让我们更加优雅地处理异步任务。然而，当我们使用 Promise 的 then 方法时，有一些细节容易被忽略，例如多次调用 then 方法可能会导致的问题。在本文中，我们将深入探讨这个问题，并提供一些解决方案。
问题描述
当我们调用 Promise 的 then 方法时，实际上是将一个回调函数添加到 Promise 的回调队列中。当 Promise 状态变为 fulfilled 或 rejected 时，这些回调函数会被执行。如果我们多次调用 then 方法，并且每次传入的回调函数都会改变 Promise 的值，那么会出现什么问题呢？
----- - - ------------------ ------------ -- ------------------- -- -- - ------------ -- ----------------- - --- -- -- -
在这个例子中，我们创建了一个 Promise 对象 p，其状态为 fulfilled，并且值为 3。然后我们调用了 p 的 then 方法两次，每次传入的回调函数都会输出 Promise 的值。结果是我们需要输出的值 3 和 6 都能够正确地输出。那么，多次调用 then 方法造成的问题在哪里呢？
我们可以将上面的代码改成这样：
----- - - ------------------ ------------ -- - ------------------ -- -- - ------ ----- - - -- ------------ -- ------------------- -- -- ---------
这里我们在第一个回调函数中将 Promise 的值乘以了 2 并返回，第二个回调函数打印了 Promise 的值。我们希望第二个回调函数中输出的是 Promise 值乘以 2 的结果，也就是 6。然而，实际上呈现在控制台上的是 undefined！这可能令人感到困惑，因为任务似乎按预期进行。让我们来了解问题的本质以及如何避免。
问题解释
根据 Promise/A+ 规范，then 方法需要返回一个新的 Promise 对象，以解决链式调用的问题：
---------------------------------------
在这个例子中，onFulfilled1 回调返回了一个值，它将被传递给 onFulfilled2 回调。如果 onFulfilled1 回调返回一个 Promise 对象，那么这个 Promise 对象的状态将决定 onFulfilled2 回调的执行时机。例如：
----- - - ------------------ ------------ -- - ------------------ -- -- - ------ --- --------------- -- ------------- - --- ------------- -- ------------------- -- -- -
在这个例子中，第一个回调函数返回了一个新的 Promise 对象，其状态为 fulfilled，值为 6。当 p 的状态变为 fulfilled 时，第一个回调函数会被执行并返回这个新的 Promise 对象。由于这个新的 Promise 对象已经 fulfilled，所以第二个回调函数会立即被执行，输出值为 6。
让我们回到之前的例子：
----- - - ------------------ ------------ -- - ------------------ -- -- - ------ ----- - - -- ------------ -- ------------------- -- -- ---------
在这个例子中，第一个回调函数没有返回一个新的 Promise 对象。当 p 的状态变为 fulfilled 时，它的回调函数被执行，并且打印了 3，同时返回了 6。然而，由于没有返回一个新的 Promise 对象，第一个回调函数的返回值并没有传递到第二个回调函数中。
事实上，第二个回调函数并没有被添加到 Promise 的回调队列中。这是因为调用多次 then 方法会创建多个新的 Promise 对象，而每个 Promise 对象只能有一个回调队列。在上面的例子中，第二个 then 方法创建了一个新的 Promise 对象并将其返回，但它并没有在第一个 Promise 对象的回调队列中添加回调函数。
解决方案
要解决这个问题，我们需要在第一个 then 方法之后添加一个 then 方法，并将前一个 then 方法的返回值作为参数传入：
----- - - ------------------ ------------ -- - ------------------ -- -- - ------ ----- - - ------------- -- ------------------- -- -- -
在这个例子中，我们将第二个 then 方法添加到第一个 then 方法之后，并将前一个 then 方法的返回值传递给后一个 then 方法。这确保了第二个 then 方法会被添加到 Promise 的回调队列中，并且能够正确地输出 Promise 值的乘以 2 的结果。
另外一种解决方案是使用 Promise 的 catch 方法来捕获错误并处理它们：
----- - - ------------------ ------------ -- - ------------------ -- -- - ------ ----- - - ----------- -- --- ------------ -- ------------------- -- -- -
在这个例子中，我们将第一个 then 方法放在一个 try-catch 块中，将错误通过 catch 方法捕获。这样，如果第一个 then 方法抛出错误，第二个 then 方法仍然能够被添加到 Promise 的回调队列中，并且能够正确地输出 Promise 值的乘以 2 的结果。
结论
通过本文，我们了解了 Promise 的 then 方法多次调用可能导致的问题，以及如何避免这个问题。要避免该问题，我们需要确保每次调用 then 方法时都返回一个新的 Promise 对象，并且调用链不被中断。当我们使用 Promise 时，一定要小心，注意细节，以确保代码的正确性。
----- - - ------------------ ------------ -- - ------------------ -- -- - ------ ----- - - ------------- -- - ------------------ -- -- - ------ ----- - - ------------- -- - ------------------ -- -- -- --
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6731d01e0bc820c5823a8d92