本指南聚焦 Promise.then 的详解与使用技巧，面向前端开发者的异步编程实践，旨在帮助你理解 Promise.then 的工作机制、链式调用与错误处理等关键点。通过多维度的示例和技巧整理，提升在真实项目中的异步编程能力。
1. Promise.then 的基本用法
定义与核心概念
在前端开发中，Promise.then 是处理异步操作的核心入口，它接收两个回调函数：onFulfilled 用于处理成功结果，onRejected 用于处理失败原因。前一个 Promise 已解决时，then 回调会被微任务队列调度执行，从而实现顺畅的异步串联。
通过 then，你可以把异步步骤按顺序拼接，每一步的返回值都会传递给下一步的回调，这使得后续逻辑清晰并易于测试。
简单示例
下面展示一个最小的异步数据获取与处理流程，其核心在于返回值的传递与错误捕获的基础用法。
const fetchData = () => new Promise((resolve) => {setTimeout(() => resolve({ ok: true, data: [1, 2, 3] }), 100);
});fetchData().then(res => {if (!res.ok) throw new Error('Network error');return res.data.map(n => n * 2);}).then(result => console.log('Processed:', result)).catch(err => console.error('Error:', err.message));链式调用的关键在于返回值的类型：如果返回一个普通值，下一步将接收到该值；如果返回一个 Promise，链会等待该 Promise 解决后再继续执行。
2. Promise.then 的执行顺序与微任务队列
事件循环中的位置
在 JavaScript 的事件循环中，Promise 的回调属于微任务队列，它们在当前宏任务结束后紧接着执行，优先级高于 setTimeout、setInterval 等宏任务。
这意味着同一轮任务中，多个 then 回调会以顺序的微任务形式挨个执行，确保链式逻辑的确定性。
then 的行为细节
当 then 回调中的逻辑返回一个值时，该值会被包装成一个新的 Promise，进入下一轮微任务队列；若返回的是 Promise，后续 then 将等待它的结果再继续。
同时，onFulfilled 或 onRejected 的抛错会导致返回的 Promise 被拒绝，错误会沿着链向下传递，直到遇到 catch 或 finally。
3. then 链式调用：返回值、错误处理
返回值的策略
then 的 onFulfilled 回调返回的内容极大影响链的走向：返回值作为下一次 onFulfilled 的输入，如果返回一个 Promise，链将等待该 Promise 的状态再继续。
如果你需要在某一步完成复杂异步逻辑，可以直接返回一个新的 Promise，让后续的 then 根据它的结果执行。
错误的传递与中断
若当前回调抛出错误，链条会进入最近的错误处理分支，也就是最近的 catch；若没有捕获，错误会向上传递并终止后续正常执行。
Promise.resolve(1).then(v => {console.log(v);throw new Error('boom');}).then(v => console.log('this will not run'), err => console.error('caught:', err.message));4. then、catch、finally 的关系
基础关系
在 Promise 链中，catch 是对错误的专门处理器，它会捕获前面的错误并继续向下传递，直到找到一个处理器为止。与此相对，onFulfilled 的正常分支会顺延到下一步。
finally 的作用是做收尾工作，无论成功还是失败都会执行，且不会改变链中的结果，只是在执行完毕后将控制权交回给后续的 then 或终止分支。
组合语义示例
以下模板演示了正确的错误处理与清理逻辑：先尝试执行操作，失败时捕获并尝试备用路径，最后做清理工作。
function fetchWithRetry() {return fetchData().then(res => res.ok ? res.data : Promise.reject('data not ok')).catch(err => {console.error('retrying', err);return fetchData(); // 重试}).then(finalData => console.log('final data', finalData)).finally(() => console.log('cleanup'));
}5. 常见坑与使用技巧
避免错误的链式返回
一个常见的坑是在 then 内部返回一个非 Promise 的值，这会将该值包装为一个已解决的 Promise，但若返回的是错误对象或未处理的异常，可能导致链条行为不符合预期。
务必明确返回值的意图：需要继续异步处理时返回 Promise；只是处理结果时返回一个普通值即可。
并发执行与顺序控制
当需要同时启动多个异步任务且等待全部完成时，Promise.all 是更稳妥的选择，它会在所有 Promise 解决后返回结果数组，且保持输入顺序。
Promise.all([p1, p2, p3]).then(results => {// results 的顺序与 p1, p2, p3 一致console.log(results);}).catch(err => console.error('error', err));6. 实战示例：用 then 实现流程控制
顺序执行多个异步任务
在实际前端应用中，常常需要按顺序执行 API 调用。then 链是实现串行异步的天然工具，每一步的输出都作为下一步的输入。
下面的示例展示一个简单的流程：获取用户信息、再获取用户数据、最后渲染页面。
getUserInfo().then(user => getUserData(user.id)).then(data => renderPage(data)).catch(err => showError(err));错误处理与回滚策略
在链中统一的错误处理是提升健壮性的关键，通过集中捕获错误可以决定后续的退化策略或重试路径。
7. Promise.then 与 async/await 的对比
两者的核心差异
then 是回调式的链式语义，每个 then 都接收回调并返回新的 Promise；async/await 则把这套链式异步变成看起来像同步的代码，提升可读性。
从 then 风格到 async/await 的迁移
若要从 Promise.then 的风格迁移到 async/await，可以将整个链封装在一个 async 函数中，通过 await 逐步处理结果，代码会更像同步流程且易于调试。
async function loadAndRender() {try {const user = await getUserInfo();const data = await getUserData(user.id);renderPage(data);} catch (err) {showError(err);} finally {cleanup();}
}