异步请求失败时，页面如何恢复

本文是演示文章，用于检查技术博客的文字、目录和代码排版。

区分四种状态

请求可以处于空闲、加载、成功和失败状态。空结果也应有明确的说明，而不是留下一个看起来损坏的页面。

保留用户输入

失败时保留表单内容，并告诉用户下一步可以做什么。不要让一次网络波动变成重新填写全部内容的理由。

async function loadData() {
  const response = await fetch('/api/data');
  if (!response.ok) throw new Error('请求失败');
  return response.json();
}

提供可恢复的路径

重试按钮应该重复原来的请求，并防止重复提交。如果页面已有内容，可以先保留它，直到新的结果成功返回。