Promise链式调用应扁平化、集中错误处理、合理并行、防范资源泄漏：避免嵌套then，统一catch至末尾，优先用Promise.all或allSettled并行独立请求，并通过AbortController或isMounted标记防止卸载后更新。
promise 链式调用本身是 javascript 处理异步的优雅方式，但写得不好容易导致嵌套过深、错误难捕获、逻辑耦合或资源泄漏。优化核心在于让链更扁平、错误更可控、逻辑更清晰、资源更安全。
避免嵌套 Promise.then()，优先用连续链式调用
深层嵌套（俗称“回调地狱”的 Promise 版）会让代码横向拉长、缩进混乱、难以阅读和维护。
❌ 不推荐：
fetch('/api/user')
.then(res => res.json())
.then(user => {
return fetch(`/api/posts?userId=${user.id}`)
.then(res => res.json())
.then(posts => {
return fetch(`/api/profile/${user.id}`)
.then(res => res.json())
.then(profile => ({ user, posts, profile }));
});
});✅ 推荐：每个异步操作单独链在上一级后面，保持线性流程：
fetch('/api/user')
.then(res => res.json())
.then(user =>
fetch(`/api/posts?userId=${user.id}`).then(res => res.json())
)
.then(posts =>
fetch(`/api/profile/${user.id}`).then(res => res.json())
)
.then(profile => ({ user, posts, profile }));更进一步，可配合 async/await 提升可读性（本质仍是 Promise 链）：
立即学习“Java免费学习笔记（深入）”；
async function loadUserData() {
const user = await (await fetch('/api/user')).json();
const posts = await (await fetch(`/api/posts?userId=${user.id}`)).json();
const profile = await (await fetch(`/api/profile/${user.id}`)).json();
return { user, posts, profile };
}统一错误处理，慎用多个 .catch()
分散的 .catch() 容易遗漏中间环节错误，也违背“单一责任”原则。应尽量将错误集中到链末尾处理，除非某一步需特殊兜底。
- 把
.catch()放在链最末端，捕获前面所有 Promise 的 rejection - 若某步失败后还想继续执行后续逻辑（如降级），可用
.catch(() => {/* 返回默认值或新 Promise */})恢复链状态 - 避免在中间写
.catch(() => Promise.resolve())吞掉错误——这会让问题静默，调试困难
例如：
fetch('/api/data')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => process(data))
.catch(err => {
console.error('请求或处理失败：', err);
showErrorMessage('加载失败，请重试');
});合理使用 Promise.all() / Promise.allSettled() 并行化
当多个独立异步操作无依赖关系时，不要强行串行调用，否则浪费等待时间。
-
Promise.all()：全部成功才 resolve；任一失败则整体 reject —— 适合强一致性场景（如表单提交需全部接口成功） -
Promise.allSettled()：无论成败都返回结果数组 —— 更适合“尽力而为”场景（如并行加载用户头像、通知配置、偏好设置）
示例（并行获取多项配置）：
const [user, settings, notifications] = await Promise.all([
fetch('/api/user').then(r => r.json()),
fetch('/api/settings').then(r => r.json()),
fetch('/api/notifications').then(r => r.json())
]);注意内存与资源生命周期，避免未清理的 Promise
链式调用中若涉及定时器、事件监听、WebSocket 或大对象，需确保在 Promise 被取消或组件卸载时及时释放。
- 前端常见场景：组件卸载后 Promise 仍 resolve 并尝试更新已销毁的 state → 触发 React warning 或内存泄漏
- 解决思路：引入取消机制（如 AbortController）、或在 resolve/reject 前加状态检查
- 简单防护：用闭包变量标记是否“仍有效”
示例（React 中防卸载更新）：
let isMounted = true;
fetch('/api/data')
.then(res => res.json())
.then(data => {
if (isMounted) setdata(data); // 仅在挂载时更新
});
// 组件卸载时设为 false（如 useEffect cleanup）
return () => { isMounted = false; }; 
