前言：空数组不能说明请求已经成功

大家好，我是杨利杰 YJlio。

上一篇练习了数组筛选和查找。这篇我先处理列表页的显示规则：刚进入可能还在加载，失败时需要提示，成功却没有记录时需要空态，有记录时才展示列表。

这是 HarmonyOS 7.0 学习笔记第 08 篇。先用普通变量与纯函数表达规则，暂不接入网络和实际页面；后续再把返回结果连接到 ArkUI 状态与条件渲染。

空数组只说明当前数据数量为零，不能单独证明加载成功。

环境项	实际记录
DevEco Studio	待填写
SDK/API	待填写
工程	当前 ArkTS 练习工程
练习目标	加载、错误、成功空数据与成功有数据的分支

配图为知识示意图，本篇不提供实际页面截图，不预先填写构建与运行结果。

一、把流程状态与数据内容分开

我用 LoadState 表达加载阶段，用 items 数组表达当前数据。它们回答的问题不同。

enum LoadState {
  Loading = 0,
  Error = 1,
  Success = 2
}

interface TicketPreview {
  id: string;
  title: string;
}

本篇使用命名枚举与对象结构，避免把字符串状态随意散落在判断中。TicketPreview 只有预览所需字段，与前篇完整工单模型分开命名。

加载中和成功无数据都可能对应空数组。如果只判断 items.length === 0，初次进入就可能显示“没有记录”，却没有说明请求尚未完成。

二、先明确唯一的显示规则

本例按加载、错误、成功空数据、成功有数据的顺序判断，每次只返回一个视图种类。

输入情况	本例选择
加载中	加载反馈
错误	错误视图
成功且无数据	空态
成功且有数据	列表

这是判断顺序，不是网络事件必须逐项经历的时间线。一次请求可以成功，也可以失败；不会先显示错误再强制进入成功。

本例将错误置于数据数量判断之前，因此旧数据存在时也优先选错误视图。其他产品可以选择“缓存列表＋提示”，但需要单独明确规则。

三、用 chooseView 返回视图种类

我先让函数只判断输入，返回一个枚举值。它不直接创建组件，也不修改数组。

enum ViewKind {
  Spinner = 0,
  Error = 1,
  Empty = 2,
  List = 3
}

function chooseView(state: LoadState, items: TicketPreview[]): ViewKind {
  if (state === LoadState.Loading) {
    return ViewKind.Spinner;
  }
  if (state === LoadState.Error) {
    return ViewKind.Error;
  }
  if (state !== LoadState.Success) {
    return ViewKind.Error;
  }
  if (items.length === 0) {
    return ViewKind.Empty;
  }
  return ViewKind.List;
}

这里沿用前面的 LoadState 和 TicketPreview。第三个分支把不在本例已知状态范围的输入归到错误视图，避免未知状态直接落到列表。

输入若来自外部系统，仍要先解析和校验；这段防御分支不能代替接口协议。具体语法和构建结果需在当前工具链确认。

四、加载与空态要用不同提示

数据数量相同，不代表用户应该看到同一种反馈。

Loading 加空数组表示还不能判断最终有没有记录；Success 加空数组才表达本例的成功无数据。

加载反馈告诉用户当前仍在处理。空态则可以引导创建记录或调整筛选。两者混用时，用户可能误以为请求已完成，或者不知道是否需要继续等待。

先判断加载阶段，再判断数据数量；不要把初始空数组直接显示成成功空态。

五、错误同时有旧数据时怎么选

这个组合值得单独练习：请求失败，但内存里仍保存上一次的数据。

const oldItems: TicketPreview[] = [
  { id: 'T-2001', title: '网络异常' }
];

const viewWithOldData: ViewKind = chooseView(LoadState.Error, oldItems);

按本例规则，返回 ViewKind.Error，并不因为数组非空就展示列表。这是本练习的产品选择，不是唯一正确方案。

如果希望展示缓存，需要明确数据是否过期、提示放在哪里、重试后怎样替换数据，以及何时进入加载反馈。不要只把分支顺序调换后就声称完成缓存策略。

六、准备四组输入对照预期

我会分别传入四种关键组合，记录返回值。为减少工具链适配问题，本篇不用元组解构，直接调用函数。

const emptyItems: TicketPreview[] = [];
const oneItem: TicketPreview[] = [
  { id: 'T-2001', title: '网络异常' }
];

const loadingView: ViewKind = chooseView(LoadState.Loading, emptyItems);
const errorView: ViewKind = chooseView(LoadState.Error, emptyItems);
const emptyView: ViewKind = chooseView(LoadState.Success, emptyItems);
const listView: ViewKind = chooseView(LoadState.Success, oneItem);

状态	数量	代码推导的预期	本机实际返回
Loading	0	Spinner	待填写
Error	0	Error	待填写
Success	0	Empty	待填写
Success	1	List	待填写

这些是阅读代码得到的预期。实际运行时可以通过日志或调试器记录返回值；数字枚举输出的是数值，报告中应同时记下成员名，避免把编号当用户文案。

七、空态与错误态给不同的下一步

同样没有显示列表，原因不同，用户可以采取的动作也不同。

视图	提示与动作方向
加载反馈	说明当前处理中
错误视图	可理解的原因说明与重试入口
空态	创建记录、调整筛选等方向
列表	展示当前有效记录

本篇只整理这些职责，没有实现按钮或网络请求。后续页面接入时，重试按钮必须连接真实动作，不能只摆一个没有响应的入口。

面向用户的提示应可理解，技术日志再记录诊断细节。不要把异常堆栈直接当作错误页说明。

八、先核对规则，再接入页面

函数返回正确的视图种类，与实际页面切换正确，是两项不同的观察。

1. 保留模板，在合适的逻辑文件加入枚举、接口和函数。
2. 构建后记录实际工具版本与结果。
3. 分别调用四组输入，记录预期与实际返回。
4. 增加错误与旧数据组合，确认符合选定规则。
5. 后续接入页面前，明确状态来源、更新时机与条件分支。

华为条件渲染说明示例说明，可以通过 if、else if、else 渲染不同状态的 UI。本文先准备选择规则，组件写法和状态管理留到后续章节。

chooseView 返回正确，不代表界面已经刷新；页面状态与渲染结果还需单独观察。

核对项	实际记录
四组输入返回值	待填写
错误带旧数据时的返回	待填写
构建结果	待填写
后续页面状态切换	待接入后填写

学习总结

这篇我把加载阶段与数据内容分开，用一个函数选择唯一视图，分别处理加载、错误、成功无数据和成功有数据。

发布前补齐构建和实际返回记录；接入真实页面后，再补充页面切换与动作证据。下一篇学习最小 ArkUI 声明式页面，从组件树理解首屏。

参考资料

1. 华为开发者联盟：ArkTS 语言概览
2. 华为开发者文档：if/else 条件渲染背景与示例
3. 华为开发者文档中心

---

声明：本文为学习示例与练习方法，配图为知识示意图；语法、构建、运行和页面结果以实际工具链、当前工程与官方文档为准。

返回顶部