如何利用箭头函数简洁优雅重构传统Promise.then链式流

在 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 链上确实能实现“化繁为简”的效果。只要避开常见的陷阱，代码便能保持既干净又易于维护的风格。