箭头函数中使用 await 必须显式声明为 async，否则编译阶段报 syntaxerror；正确写法是 async () => await fetch(...)，且箭头函数自动继承外层 this，避免 this 丢失。
对象方法里用箭头函数嵌套 await，本身不会“丢失 async 上下文”，真正出问题的是：箭头函数没被声明为 async，却在里面写了 await —— 这直接报语法错误，根本跑不起来。
关键前提：await 只能在 async 函数里用
箭头函数和普通函数一样，必须显式标记 async 才能合法使用 await。没加 async 的箭头函数里写 await，JS 引擎会立刻抛出 Uncaught SyntaxError: await is only valid in async function，不是运行时“上下文丢失”，而是编译阶段就失败。
常见误写：
const user = {
id: 123,
loadData() {
// ❌ 错误：箭头函数没加 async，但用了 await
const fetchProfile = () => fetch(`/api/user/${this.id}`).then(r => r.json());
const fetchOrders = () => fetch(`/api/orders?uid=${this.id}`).then(r => r.json());
return Promise.all([fetchProfile(), fetchOrders()]);
}
};
正确写法：箭头函数也要加 async，并注意 this 绑定
如果想在对象方法中用箭头函数封装异步逻辑，必须满足两个条件：
- 箭头函数自身声明为 async
- 确保它能访问到正确的 this（箭头函数自动继承外层 this，这点反而是优势）
示例：
const user = {
id: 123,
async loadData() {
// ✅ 正确：箭头函数加了 async，且 this 指向 user 实例
const fetchProfile = async () => {
const res = await fetch(`/api/user/${this.id}`);
return res.json();
};
const fetchOrders = async () => {
const res = await fetch(`/api/orders?uid=${this.id}`);
return res.json();
};
return Promise.all([fetchProfile(), fetchOrders()]);
}
};
更推荐的写法：避免无意义嵌套，直写 await
上面那种写法虽然合法，但容易让逻辑变绕。多数情况下，没必要额外包一层箭头函数：
- 如果只是顺序执行，直接 await 就行
- 如果需要并行，用 Promise.all 包裹多个 await 表达式（或直接调用返回 Promise 的函数）
- 把重复逻辑抽成独立 async 函数，比在方法里塞一堆箭头函数更清晰
简化版：
const user = {
id: 123,
async loadData() {
const [profile, orders] = await Promise.all([
fetch(`/api/user/${this.id}`).then(r => r.json()),
fetch(`/api/orders?uid=${this.id}`).then(r => r.json())
]);
return { profile, orders };
}
};
警惕 this 丢失的真场景：回调传参或解构时
真正导致 “this 不见了” 的，往往不是箭头函数 + await，而是把方法赋值给变量、解构、或传给定时器/事件监听器时：
const { loadData } = user; // 解构后 this 丢失
loadData(); // this 是 undefined，fetch 地址出错
// ✅ 解决方案：
// 用箭头函数包装（保留 this）
const boundLoad = () => user.loadData();
// 或提前 bind
const boundLoad = user.loadData.bind(user);
// 或改用类 + 类字段语法（自动绑定）
class User {
id = 123;
loadData = async () => {
const res = await fetch(`/api/user/${this.id}`);
return res.json();
};
}
