在 JavaScript 开发中，合理运用箭头函数重构 Promise.then 链式调用，能显著提升代码的可读性与维护性。箭头函数本身不会改变 Promise 的执行机制，但只要用对地方，就能让 `.then()` 链变得更为清爽、易读。其核心价值并非创造新功能，而是通过简化冗余语法、规避隐式返回的常见陷阱，同时让数据流动路径更加直观。以下从实践角度提炼出几个最见效的优化维度。
用单参数省略括号，让映射逻辑一目了然
当 `.then()` 仅接收一个参数且只执行简单数据转换时，完全可以把括号和花括号一并省略，直接返回表达式。这种写法天然适用于解构、属性提取、基础运算等场景。需要注意：若需解构对象，务必在外层添加一对小括号，否则会引发语法错误。
// 传统写法（冗余）
.then(function (res) { return res.data; })
// 箭头函数重构（简洁）
.then(res => res.data)
.then(({ data, status }) => data)✅.then({ data } => data)❌（语法错误）
多步骤处理时，用隐式返回串联纯函数
将每个 `.then()` 视为一个独立的纯函数，借助箭头函数的隐式返回特性，手动书写 `return` 的必要性降至最低。与传统写法对比，后者容易遗漏 return 且缩进不断加深；采用箭头函数后，代码既扁平又不易出错，尤其在处理多步 API 请求时优势明显。
// 传统写法（易漏 return，缩进深）
.then(function (user) {
return fetch(`/api/posts?userId=${user.id}`);
})
.then(function (response) {
return response.json();
})
.then(function (posts) {
return posts.filter(p => p.published);
});
// 箭头函数重构（扁平、不易出错）
.then(user => fetch(`/api/posts?userId=${user.id}`))
.then(response => response.json())
.then(posts => posts.filter(p => p.published));
错误处理保持一致性，避免箭头函数捕获 this 陷阱
箭头函数不绑定自己的 `this`，这对 Promise 链通常没有影响；但需注意它不能作为构造函数使用，也无法被 `bind` 改变上下文。在错误处理方面，建议统一采用 `.catch()` 来接收错误，避免在 `.then(null, ...)` 中混用普通函数——因为第二个参数已被废弃，而且箭头函数在此场景下并无优势。
- ✅
.catch(err => console.error('API failed:', err.message)) - ⚠️ 避免
.then(success => ..., err => {...})—— 第二个参数已被废弃，且箭头函数在此处无优势
配合 async/await 时，箭头函数仍适用但需注意执行时机
在 `async` 上下文中，箭头函数依然可用于回调或高阶函数，但不要误认为它能让 `await` 在 `.then()` 内部生效。下面两种写法的效果截然不同：
- ❌
.then(async res => await process(res))—— 返回的是Promise，链式行为不变 - ✅ 更清晰的做法是：将整段逻辑抽成异步函数，再通过
then调用它：.then(handleResponse)，其中const handleResponse = async res => {...}
总的来说，箭头函数虽非万能方案，但在 Promise 链上确实能实现“化繁为简”的效果。只要避开常见的陷阱，代码便能保持既干净又易于维护的风格。
