筛选、取消请求与缓存

这一节要完成什么

避免快速输入造成旧请求覆盖新结果，并减少重复请求。

先理解：为什么要学它

避免快速输入造成旧请求覆盖新结果，并减少重复请求。

跟着做

let controller;
async function search(query) {
  controller?.abort();
  controller = new AbortController();
  return loadData(`/api/search?q=${encodeURIComponent(query)}`, {
    signal: controller.signal,
  });
}

1. 打开上一节项目并记录当前结果。
2. 输入示例并完成：快速连续搜索三个词，最终界面只能显示最后一个词的结果。
3. 改变一个输入，先预测再验证。
4. 制造并修复典型错误：取消不是错误提示；识别 AbortError，真实失败才通知用户。

关键代码怎么读

• 避免快速输入造成旧请求覆盖新结果，并减少重复请求。
• 按输入、处理、输出三部分阅读代码。
• 用不同输入和边界情况验证。

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

自己完成一次

快速连续搜索三个词，最终界面只能显示最后一个词的结果。

完成检查

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