当 Promise 的 then()
方法返回的新 Promise 对象状态为 成功(Resolved/Fulfilled) 时,链式调用会按照“顺序执行”的规则继续向下执行,具体表现如下:
1. 直接触发下一个 then()
的成功回调
下一个 then()
方法的第一个参数(onFulfilled
成功回调函数)会被立即调用,并且接收当前成功状态的结果值作为参数。
示例:
Promise.resolve(10)
.then(num => {
console.log("第一步结果:", num); // 输出:第一步结果:10
return num * 2; // 返回普通值 → 新 Promise 状态为成功,结果为 20
})
.then(num => {
// 接收上一个 then() 返回的成功结果
console.log("第二步结果:", num); // 输出:第二步结果:20
return Promise.resolve(num + 5); // 返回成功的 Promise → 新结果为 25
})
.then(num => {
console.log("第三步结果:", num); // 输出:第三步结果:25
});
2. 若返回的是“pending 状态的 Promise”,后续会等待其完成
如果当前 then()
的回调返回一个 仍处于 pending 状态的 Promise(例如包含异步操作),下一个 then()
会等待该 Promise 状态变为成功后再执行,并接收其最终的成功结果。
这一特性保证了异步操作的顺序执行:
Promise.resolve()
.then(() => {
// 返回一个 pending 状态的 Promise(模拟异步操作)
return new Promise(resolve => {
setTimeout(() => {
console.log("异步操作完成");
resolve("异步结果"); // 1秒后变为成功状态
}, 1000);
});
})
.then(result => {
// 等待上一个 Promise 完成后才执行
console.log("接收异步结果:", result); // 1秒后输出:接收异步结果:异步结果
});
3. 若下一个 then()
未提供成功回调,结果会“透传”
如果下一个 then()
没有提供成功回调(第一个参数为 null
或未传),当前的成功结果会直接透传到再下一个 then()
中。
示例:
Promise.resolve("原始数据")
.then(data => {
return data + " 处理后"; // 新 Promise 成功,结果为 "原始数据 处理后"
})
.then() // 未提供成功回调,结果透传
.then(null, () => {
}) // 只提供失败回调,成功结果继续透传
.then(result => {
console.log("最终结果:", result); // 输出:最终结果:原始数据 处理后
});
总结
当 then()
返回的新 Promise 状态为成功时,链式调用会:
- 立即触发下一个
then()
的成功回调,并传递当前结果; - 若返回的是 pending 状态的 Promise,会等待其完成后再执行后续逻辑;
- 若后续
then()
未处理成功结果,结果会透传到更后面的then()
。
这种“结果传递 + 顺序执行”的机制,让多步异步操作能够像同步代码一样线性书写,清晰地表达操作的先后关系。