为什么请求状态不能只写 loading
前端页面的大部分数据都来自接口。只处理成功态，会让用户在慢网、接口报错、无权限、空数据时不知道发生了什么。完整的请求状态至少包括：初始加载、加载成功、空数据、加载失败、重试中、权限不足、提交中和局部刷新。
列表页的状态拆分
列表页最容易混淆“首次加载”和“翻页加载”。首次加载时页面没有数据，可以使用骨架屏或加载占位；翻页或筛选时页面已有数据，不应该把整个页面清空，否则用户会感觉页面闪烁。
状态建议：
initialLoading：首次进入页面，还没有任何数据
refreshing：已有数据，正在重新请求
loadingMore：正在加载下一页
empty：请求成功，但列表为空
error：请求失败，允许重试推荐处理方式：
- 首次加载失败：展示错误说明和重试按钮。
- 刷新失败：保留旧数据，给出轻量提示。
- 加载更多失败：只在列表底部显示重试入口。
- 搜索无结果：展示“没有匹配结果”，并保留清空筛选入口。
详情页的状态处理
详情页需要区分接口错误、资源不存在和无权限。三者给用户的下一步不同。
- 404：资源不存在或已删除，提供返回列表入口。
- 403：没有访问权限，提示切换账号或申请权限。
- 500：服务异常，提供重试，必要时保留错误编号。
不要把所有失败都显示成“加载失败”。如果用户没有权限，重试多少次也不会成功；如果资源已删除，应该让用户回到可继续操作的页面。
表单提交状态
表单提交最重要的是防止重复提交和保留用户输入。用户点击提交后，按钮应该进入提交中状态，避免连续点击。接口失败时，不要清空表单，应该保留输入内容并展示明确错误。
提交按钮文案建议：
默认：保存
提交中：保存中...
成功：保存成功后返回或刷新
失败：保留表单，显示错误原因字段校验建议分两层：
- 前端校验：必填、长度、格式、数值范围。
- 后端校验：权限、唯一性、业务规则、状态流转。
前端校验不能替代后端校验，但可以提前减少无效请求。
错误信息怎么写
错误信息要告诉用户“发生了什么”和“下一步能做什么”。例如“保存失败”不够具体，“名称已存在，请换一个名称后重试”更有用。
- 网络错误：检查网络后重试。
- 登录失效：重新登录。
- 权限不足：联系管理员开通权限。
- 数据冲突：刷新页面后重新编辑。
推荐组件接口
interface RequestState<T> {
data: T | null;
loading: boolean;
refreshing: boolean;
error: Error | null;
reload: () => Promise<void>;
}实际项目里可以把请求状态封装成 hook 或 composable，但不要过度封装到看不见状态细节。页面仍然需要根据业务区分空态、权限、错误和重试。
上线前检查
- 断网时页面是否有反馈。
- 接口返回空数组时是否有空态。
- 接口 403、404、500 是否有不同处理。
- 提交按钮是否防重复点击。
- 失败后用户输入是否保留。
前端体验的稳定性来自细节。请求状态处理完整，页面就不会只在“接口正常、网络很快、用户操作标准”的理想情况下才可用。
评论