js中then的用法

在 JavaScript 中，then() 是 Promise 对象的核心方法，用于处理异步操作的结果并支持链式调用。以下是其核心用法和关键细节的总结：

1. 基本语法promise.then(resolveHandler, rejectHandler);

参数：
resolveHandler：处理 Promise 成功状态的函数，接收成功结果作为参数。
rejectHandler（可选）：处理 Promise 失败状态的函数，接收错误原因作为参数。

2. 链式调用

then() 的返回值是一个新的 Promise，允许通过链式调用处理多个异步步骤：

fetchData() .then(data => { console.log("第一步结果:", data); return processData(data); // 返回新 Promise 或值 }) .then(processedData => { console.log("第二步结果:", processedData); }) .catch(error => { console.error("任意步骤出错:", error); // 统一捕获错误 });

关键点：
每个 then() 的返回值会传递给下一个 then()。
若某一步抛出错误或返回被拒绝的 Promise，会跳过后续 then()，直接进入最近的 catch()。

3. 处理结果传递

返回普通值：直接作为下一个 then() 的参数。.then(result => result + 1) // 传递修改后的值
返回 Promise：链式调用会等待该 Promise 完成，再传递其结果。.then(result => fetchMoreData(result)) // 等待新异步操作完成

4. 错误处理

rejectHandler：显式处理当前 Promise 的失败（较少用，通常用 catch() 替代）。.then(null, error => console.log("仅处理错误:", error));
catch()：更简洁的链式错误捕获（推荐）。.then(step1).then(step2).catch(error => console.error("统一处理错误:", error));

5. 注意事项

隐式返回 Promise：即使未显式返回，then() 也会返回新 Promise。
同步错误：then() 内的同步错误需通过 try...catch 或返回 Promise.reject() 捕获：.then(result => { try { return riskyOperation(result); } catch (error) { return Promise.reject(error); // 转换为拒绝状态 }})
值穿透：若 then() 未传 resolveHandler，结果会直接传递给下一个 then()。

6. 实际应用示例// 示例：用户登录后获取数据login(username, password) .then(token => { if (!token) throw new Error("登录失败"); return fetchUserData(token); // 返回新 Promise }) .then(userData => { console.log("用户数据:", userData); return updateUI(userData); // 返回普通值 }) .then(() => console.log("UI 更新完成")) .catch(error => showErrorModal(error.message)); // 集中处理错误总结

核心作用：链式处理异步结果，避免回调地狱。
灵活性：支持值传递、Promise 嵌套及错误集中处理。
最佳实践：优先使用 catch() 而非 rejectHandler，保持链式结构清晰。

通过合理使用 then()，可以高效管理复杂的异步流程，同时保持代码的可读性和可维护性。

您可能感兴趣问答

Collapsible

热门标签

热点问答