一次请求的界面状态，不只有成功和失败

01把空结果从错误里分出来

一个正常完成的查询，可能没有任何记录。此时应展示明确的空状态，而不是错误提示。请求仍在进行时，则要让用户知道界面正在加载，避免连续重复操作。

可以先列出空闲、加载、成功、空结果和失败几种状态，再决定每种状态下应显示哪些内容、哪些按钮可以使用。

02检查响应，再解析数据

使用 fetch 时，收到一个 HTTP 错误响应并不一定会让 Promise 自动拒绝。需要检查响应状态，再决定如何处理返回的数据。

下面的简化函数区分 HTTP 失败和成功响应。JSON 解析也可能失败，调用方应统一捕获并给出可理解的提示。

JAVASCRIPT

async function readJSON(url) {
  const response = await fetch(url, {
    headers: { Accept: 'application/json' },
  });

  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }
  return response.json();
}

03防止旧请求覆盖新结果

搜索词或筛选条件快速变化时，较早发出的请求可能较晚返回。可以中止不再需要的请求，或用递增的请求编号，仅接受当前编号对应的结果。

对新增、扣减等会修改数据的操作，还要防止重复提交。界面的禁用状态能减少误触，服务端的幂等处理则用于应对重试与网络不确定性，两层职责应分别实现。

进一步阅读

下列文档用于延伸阅读，文中示例是围绕具体问题编写的简化示例。

MDN：使用 Fetch