Promise 是 JavaScript 中常用的异步编程模型，其通过 then 方法实现回调函数的链式调用，使得异步流程更加清晰和易于管理。但是在使用 then 方法时，因为异步执行的不确定性，有时候会遇到链式调用失效的情况，本文将深入探究 Promise then 方法的链式调用并提供相关学习和指导意义。
then 方法的基本用法
以一个简单的异步示例为例：
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data');
}, 2000);
});
}上述代码使用 Promise 封装了一个异步请求，2 秒钟后返回 'data' 值，现在我们可以通过 then 方法来实现链式调用：
fetchData().then(data => {
console.log(data);
});链式调用的实现
then 方法返回的是一个新的 Promise 实例，可以在 then 方法中继续调用 then 方法，从而实现链式调用。
fetchData().then(data => {
console.log(data);
return 'new data';
}).then(data => {
console.log(data);
});上述代码通过在第一个 then 方法中返回一个新的值 'new data'，使得第二个 then 方法能够接收并打印该值。
链式调用失效的原因
但是实际开发中，我们可能会遇到链式调用失效的情况，例如：
fetchData().then(data => {
console.log(data);
});
fetchData().then(data => {
console.log(data);
});此时输出结果会是两次 'data'，而不是期望中的 'data'，'data'。这是因为每次执行 fetchData 方法都会生成一个新的 Promise 实例，而 then 方法返回的是一个新的 Promise 实例，这个新实例与原来的实例不同，二者状态无关。因此在上述代码中，第一个 then 方法只能接收到第一个 Promise 实例的状态和值，而第二个 then 方法只能接收到第二个 Promise 实例的状态和值，导致链式调用失效。
链式调用的解决方法
在上面的例子中，我们可以通过将 Promise 实例保存在变量中从而实现链式调用。
-- -------------------- ---- ------- ----- ------- - ------------ ----------------- -- - ------------------ --- ----------------- -- - ------------------ ---
上述代码中，使用 const 关键字将 Promise 实例保存在变量 promise 中，之后所有的 then 方法都基于这个实例进行调用。这样就能保证所有的 then 方法都基于同一个 Promise 实例实现链式调用，而不会出现上述的情况。
结论
在使用 Promise 的 then 方法进行链式调用时，需要特别注意每次执行 Promise 方法生成的实例是不同的，因此每次调用 then 方法都会基于不同的 Promise 实例，导致链式调用失效。解决方法是在调用 Promise 方法时将实例保存在变量中，所有的 then 方法基于同一实例进行调用。这样能够有效地解决链式调用失效的问题，使得异步流程更加清晰和易于管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67175c88ad1e889fe2213359