不能将组件本身写成 async 函数，而应在内部用 useeffect 或事件处理器调用封装好的分层 async 函数（如 fetchuserprofile、fetchuserorders），配合 usestate 管理状态，并统一错误处理与竞态控制。
不能把组件本身写成 async 函数，但可以在组件内部用 async 函数处理多层级数据加载——关键在于把异步逻辑拆到独立函数里，再用 useEffect 或事件处理器调用它，并配合状态管理。
分层封装 async 函数
把每层依赖关系明确的请求单独封装为 async 函数，比如先获取用户 ID，再查用户详情，最后拉取该用户的订单列表。每个函数只专注一件事，返回明确的数据或抛出错误。
- 避免在同一个 async 函数里堆叠多个 await，尤其是存在条件分支时（如“有 token 才请求 B”）
- 给每个函数加类型提示或 JSDoc 注释，说明输入、输出和可能失败的原因
- 例如：async function fetchUserProfile(id) { ... } 和 async function fetchUserOrders(profileId) { ... } 是两个可单独测试、复用的单元
用 useEffect 触发链式加载
在 React 中，useEffect 是启动多层级加载的自然入口。它能监听依赖变化（比如 userId 更新），并确保上一层结果就绪后再发起下一层请求。
- 第一层：useEffect 里调用 fetchUserProfile(userId)
- 第二层：在 fetchUserProfile 成功后，自动调用 fetchUserOrders(profile.id)
- 全程用 useState 管理 loading、error、data 三个状态，避免“半加载”UI
统一错误处理与降级策略
多层级加载中任一环节失败，都会中断后续流程。与其在每层都写 try/catch，不如集中处理：
- 用 to() 工具函数把 Promise 转成 [error, data] 元组，消除嵌套 try/catch
- 对非关键层级（如头像、统计数）采用“静默失败 + 默认值”，不影响主流程渲染
- 对关键路径（如用户身份、权限数据）设置重试机制，比如 fetchWithRetry(url, 2)
避免常见陷阱
多层级异步容易踩坑，核心是守住“不阻塞渲染”和“不丢失上下文”两条线：
- 不要在 render 函数里 await —— 这会让组件变成 Promise，React 直接报错
- 不要在 useEffect 中忽略清理逻辑：如果请求发出后组件已卸载，需取消或忽略响应，防止 setState 报 warning
- 避免“竞态请求”：比如快速切换用户，后发的请求先返回，覆盖了先发但慢的正确数据 —— 可用 AbortController 或请求 ID 标记来过滤过期响应
