箭头函数在 promise 链中简化 .then()/.catch() 写法，需注意隐式/显式返回、async 箭头函数用法及 this 继承特性。
箭头函数在 Promise 链式调用中使用非常自然，主要用来简化 .then() 和 .catch() 的回调写法，但要注意 this 绑定和返回值规则。
箭头函数替代普通函数写法
Promise 链中每个 .then() 接收一个处理成功结果的函数。箭头函数可直接作为参数传入，省去 function 关键字和花括号（单参数、单表达式时更简洁）：
fetch('/api/data')
.then(res => res.json()) // 箭头函数：隐式返回解析后的 JSON
.then(data => console.log(data)) // 单参数 + 单表达式 → 自动 return
.catch(err => console.error(err)); // 同样适用于 catch
注意隐式返回与显式返回的区别
箭头函数是否返回 Promise，直接影响链式是否继续向下执行：
- 省略花括号和
return→ 隐式返回表达式结果（如对象、数字、字符串） - 用了花括号 → 必须显式写
return，否则返回undefined，后续.then()会收到undefined - 想继续链式调用异步操作（比如再发一个请求），必须返回一个新的 Promise（例如另一个
fetch或Promise.resolve()）
// ✅ 正确：返回新 Promise，链式继续
.then(data => fetch(`/api/user/${data.userId}`))
<p>// ❌ 错误：无 return，返回 undefined，下个 then 收到 undefined
.then(data => { console.log(data); })</p><p>// ✅ 正确：显式 return
.then(data => {
console.log(data);
return data;
})</p>避免在箭头函数中使用 await 的误区
箭头函数本身不能加 async 关键字，但可以把它声明为 async 箭头函数（ES2017+ 支持），从而在其中使用 await：
// ✅ 合法：async 箭头函数，内部可用 await
.then(async data => {
const user = await fetch(`/api/user/${data.id}`).then(r => r.json());
return { ...data, user };
})
<p>// ⚠️ 注意：这样写等价于返回 Promise，链式依然有效</p>不加 async 却在箭头函数里写 await 会报语法错误。
慎用箭头函数处理 this 相关逻辑
箭头函数不绑定自己的 this，而是继承外层作用域的 this。如果 Promise 回调里需要访问某个对象的方法或属性（比如 Vue/React 组件实例），且依赖 this，用箭头函数是安全的；但如果原意是让 this 指向 Promise 实例或调用上下文，那普通函数更可控。
class ApiClient {
baseUrl = '/api';
<p>getData() {
return fetch(this.baseUrl + '/data')
.then(res => res.json())
.then(data => {
// 这里的 this 仍指向 ApiClient 实例 ✅
this.process(data);
return data;
});
}</p><p>process(data) { /<em> ... </em>/ }
}</p>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
