空列表、加载中、请求失败：把三个页面状态分开验收

AgentField 编辑整理｜本文提供列表页验收方法与模拟响应函数。数据、延迟和失败均为教学模拟；已验证本地状态逻辑，尚未完成浏览器视觉、DOM 点击交互或真实网络验收，不是线上事故案例。

一个没有记录的区域，可能是还没加载完，也可能是加载成功但结果为空，或者请求失败。这三种情况需要不同提示和下一步。只检查“有数据时能显示”容易漏掉它们，尤其容易留下上一次的错误提示。

一、先约定每种状态表示什么

1. 加载中：结果尚未确定，提示“正在加载，请稍候”。不能提前告诉用户“没有记录”。本例等待期间暂时禁用再次加载。
2. 成功但空列表：加载已成功，结果为零条，提示“加载完成，当前没有记录”。不显示失败重试按钮。
3. 失败：本次没有取得可用结果，提示“模拟请求失败，请重试”，提供重试入口。不能把错误当成空数组后显示空列表。
4. 正常有数据：作为对照，显示两条虚构记录，并清除加载和失败提示。

初次进入、尚未发起加载，也单独记为“未开始”。本例选择在新加载开始时清空旧记录；若你的产品需要保留上次数据，要另外写清“旧结果”的标识与规则，不把旧数据冒充本次成功结果。

二、固定模拟输入，不依赖偶然断网

下面是完整的模拟加载函数，可以接到你自己的列表页测试入口。它只返回 Promise，不发网络请求，也不包含页面或按钮实现：empty 返回空数组，data 返回两条虚构记录，error 模拟失败。未知模式同样拒绝，避免误当成成功。

function mockLoad(scenario, schedule = callback => setTimeout(callback, 1200)) {
  return new Promise((resolve, reject) => {
    schedule(() => {
      if (scenario === 'error') reject(new Error('DEMO_FAILURE'));
      else if (scenario === 'empty') resolve([]);
      else if (scenario === 'data') resolve([
        { id: 'demo-a', title: '演示任务 A' },
        { id: 'demo-b', title: '演示任务 B' }
      ]);
      else reject(new Error('UNKNOWN_DEMO_SCENARIO'));
    });
  });
}

在异步加载逻辑中，用 try / catch 处理 await mockLoad(...) 的成功与拒绝，不在失败分支伪造空数组。这里的异步处理方式可核对 MDN async function 文档。

1200 毫秒只是为了留出观察加载状态的时间；实际回调可能更晚，不用它承诺响应耗时。说明了这个限制。本地逻辑检查可以注入可控的 ，先检查等待状态，再手动触发完成；这种方式没有测量浏览器计时。