加载、空数据与失败状态

这一节要完成什么

让界面明确显示正在加载、无结果、成功和失败四种状态。

先理解：为什么要学它

让界面明确显示正在加载、无结果、成功和失败四种状态。

跟着做

async function refresh() {
  showStatus('loading');
  try {
    const items = await loadData(endpoint);
    render(items);
    showStatus(items.length ? 'ready' : 'empty');
  } catch (error) {
    showStatus('error', error.message);
  }
}

1. 打开上一节项目并记录当前结果。
2. 输入示例并完成：用正常地址、空结果和错误地址分别触发三条路径，加载中按钮不可重复点击。
3. 改变一个输入，先预测再验证。
4. 制造并修复典型错误：不要 catch 后静默；给用户可理解提示，并保留可供调试的错误。

关键代码怎么读

• 让界面明确显示正在加载、无结果、成功和失败四种状态。
• 按输入、处理、输出三部分阅读代码。
• 用不同输入和边界情况验证。

常见错误：看到什么，检查什么

自己完成一次

用正常地址、空结果和错误地址分别触发三条路径，加载中按钮不可重复点击。

完成检查

• 我完成了本节要求的可见结果
• 我能解释关键代码的输入、处理和输出
• 我测试了正常、边界和错误情况