由 pnpm docs:lessons 生成。教学脚本在 src/data/network-state.json，合同补充在 scripts/generate-network-state.mjs。本页含教师参考答案。
会限速、离线和阻断资源。先修按 完整目录 的章节关系；基础操作、原理关系随本课讲解。
弱网、断网、HTTP 错误与资源阻断有不同表现，需要同时检查网络和界面终态。
限速影响实际耗时；Offline 和资源阻断可能让请求没有 HTTP 响应
fetch 对 HTTP 503 不会自动 reject，需要检查 response.ok
失败后应结束 loading 并可重试，图片失败需提供可读替代
改变带宽、延迟和资源失败条件。模型不改变真实浏览器设置，不计为实战完成。
- 先预测一个条件变化的结果。
- 只改变一个条件，比较输入与输出。
- 将模型中的关系对应到真实 DevTools。
症状：结算失败后加载状态不结束，或图片坏了却没有替代内容。
正常结果：失败后结束等待并可重试，图片失败保留可读替代。
真实机制：submit 首次真实 503，下一次重试 200；图片真实 404。
- 从本课准备并打开独立商城；先打开 DevTools，再运行故障。
- 用 Fast 3G 观察 loading，再试 Offline 或 Request Conditions 阻断本课资源。
- 观察失败是 HTTP 503、404 还是浏览器网络错误；本课固定故障使用真实 HTTP 错误。
- 恢复 No throttling、Online 和阻断设置后再报告；修复案例可重试或展示备用图。
- 先保存证据，再应用针对性的对照；错误对照不会通过页面检查。
- 回到教程选择真实证据，完成独立挑战后写下排查与恢复步骤。
设计结算失败测试并恢复条件。新会话改变输入与故障配置，可能再次抽到同一类型；按实际证据判断。
| 配置 | 原因 | 证据 | 修复/验证 |
|---|---|---|---|
| 配置1 | HTTP 503 后 loading 没有结束 | submit 返回 503，页面仍显示处理中 | 检查状态并在 finally 收尾，允许重试 |
| 配置2 | 图片请求失败但没有备用展示 | 图片 404，错误分支未显示替代内容 | 处理 image error 并保留替代内容 |
| 干扰项 | 只凭界面颜色判断 | 没有对应请求或存储证据 | 同时改变全部条件且不复测 |
- 先区分实际请求、浏览器策略、存储与界面处理，记录第一次偏离的环节。
- 用 Fast 3G 观察 loading，再试 Offline 或 Request Conditions 阻断本课资源。
- 比较两个候选解释：HTTP 503 后 loading 没有结束；图片请求失败但没有备用展示。保持其他输入一致再验证。
弱网/Offline/阻断由实际 DevTools 操作。固定服务错误与真正断网分别记录，恢复网络后再提交。
清理与会话约定见 共同合同。请在复盘写下条件、观察对象、实际值、根因、最小修改与恢复设置；将 HTTP 缓存、Cache Storage、内存状态分开。