企业官网建设流程全解析

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

大家好，我是杨利杰 YJlio。

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

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

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

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

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

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

enumLoadState{Loading=0,Error=1,Success=2}interfaceTicketPreview{id:string;title:string;}

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

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

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

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

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

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

三、用 chooseView 返回视图种类

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

enumViewKind{Spinner=0,Error=1,Empty=2,List=3}functionchooseView(state:LoadState,items:TicketPreview[]):ViewKind{if(state===LoadState.Loading){returnViewKind.Spinner;}if(state===LoadState.Error){returnViewKind.Error;}if(state!==LoadState.Success){returnViewKind.Error;}if(items.length===0){returnViewKind.Empty;}returnViewKind.List;}

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

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

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

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

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

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

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

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

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

constoldItems:TicketPreview[]=[{id:'T-2001',title:'网络异常'}];constviewWithOldData:ViewKind=chooseView(LoadState.Error,oldItems);

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

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

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

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

constemptyItems:TicketPreview[]=[];constoneItem:TicketPreview[]=[{id:'T-2001',title:'网络异常'}];constloadingView:ViewKind=chooseView(LoadState.Loading,emptyItems);consterrorView:ViewKind=chooseView(LoadState.Error,emptyItems);constemptyView:ViewKind=chooseView(LoadState.Success,emptyItems);constlistView:ViewKind=chooseView(LoadState.Success,oneItem);

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

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

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

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

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

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

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

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

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

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

学习总结

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

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

参考资料

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

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

返回顶部