Promise 实例的 then()
方法是处理异步操作结果的核心方法,主要作用是:为 Promise 注册“成功/失败”的回调函数,并返回一个新的 Promise 对象,从而实现链式调用。
具体作用拆解:
注册回调函数
then()
可以接收两个可选参数,分别对应 Promise 两种状态的处理逻辑:- 第一个参数:
onFulfilled
函数
当 Promise 状态变为 成功(Fulfilled) 时触发,接收异步操作的“成功结果”作为参数。 - 第二个参数:
onRejected
函数(可选)
当 Promise 状态变为 失败(Rejected) 时触发,接收异步操作的“失败原因”作为参数。
示例:
new Promise((resolve, reject) => { resolve("成功结果"); // 模拟异步操作成功 }).then( (result) => { console.log("成功处理:", result); }, // 成功回调 (error) => { console.log("失败处理:", error); } // 失败回调(可选) );
- 第一个参数:
返回新的 Promise,支持链式调用
then()
方法会返回一个全新的 Promise 对象,这是实现链式调用的关键。新 Promise 的状态和结果由以下规则决定:- 如果
onFulfilled
/onRejected
回调返回一个普通值(非 Promise),新 Promise 会立即变为成功状态,结果为该返回值。 - 如果回调返回一个 Promise 对象,新 Promise 会“继承”这个 Promise 的状态和结果(等待其完成,再决定自身状态)。
- 如果回调抛出错误(
throw new Error(...)
),新 Promise 会变为失败状态,结果为抛出的错误。
示例(链式调用):
// 链式调用:上一个 then() 的返回值会作为下一个 then() 的输入 Promise.resolve(1) .then(num => num * 2) // 返回普通值 2 → 新 Promise 成功,结果为 2 .then(num => Promise.resolve(num + 3)) // 返回 Promise → 新 Promise 成功,结果为 5 .then(num => console.log(num)); // 输出:5
- 如果
- 分离成功与失败逻辑
虽然then()
可以通过第二个参数处理失败,但更推荐用catch()
专门处理错误(catch()
本质是then(null, onRejected)
的语法糖)。这样可以让成功逻辑和失败逻辑更清晰:fetchData() .then(data => { /* 处理成功 */ }) // 只关注成功逻辑 .catch(error => { /* 处理失败 */ }); // 统一捕获所有环节的错误
总结:
then()
方法的核心价值是:将异步操作的“后续处理逻辑”与“异步操作本身”解耦,并通过返回新 Promise 实现链式调用,让多步异步操作的代码像同步代码一样线性书写,避免了回调地狱。