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