异步请求与错误恢复
实现可取消搜索，模拟慢响应与断网，确保旧结果不会覆盖当前搜索条件。
课程全目录 · 选择章节
本课学习目标
- • 理解 — 异步任务存在等待、成功、失败与取消。请求可能乱序返回，离开页面后可能继续运行。用 AbortController 取消无用请求，检查 HTTP 状态，并区分可重试的网络失败与不可重试的权限或参数错误。
- • 应用 — 搜索框连续输入会发出多次查询。旧请求如果后返回可能覆盖新结果；取消旧请求或核对请求 ID，才能保证屏幕对应当前输入。
- • 验证 — 实现可取消搜索，模拟慢响应与断网，确保旧结果不会覆盖当前搜索条件。
完成路径
阅读概念与案例 → 完成动手任务 → 勾选实践检查 → 回答检查点 → 保存完成记录。练习由你自行检查，不会假装成自动代码评分。
01 / 核心概念
异步任务存在等待、成功、失败与取消。请求可能乱序返回，离开页面后可能继续运行。用 AbortController 取消无用请求，检查 HTTP 状态，并区分可重试的网络失败与不可重试的权限或参数错误。
搜索框连续输入会发出多次查询。旧请求如果后返回可能覆盖新结果；取消旧请求或核对请求 ID，才能保证屏幕对应当前输入。
不要对所有失败无限重试。写请求可能重复产生副作用，重试前要检查幂等性、预算和用户是否仍需要这次操作。
02 / 心智模型
理解
异步任务存在等待、成功、失败与取消。请求可能乱序返回，离开页面后可能继续运行。用 AbortController 取消无用请求，检查 HTTP 状态，并区分可重试的网络失败与不可重试的权限或参数错误。
应用
搜索框连续输入会发出多次查询。旧请求如果后返回可能覆盖新结果；取消旧请求或核对请求 ID，才能保证屏幕对应当前输入。
验证
实现可取消搜索，模拟慢响应与断网，确保旧结果不会覆盖当前搜索条件。
03 / 代码骨架
const controller = new AbortController();
fetch('/api/search', { signal: controller.signal });
// Cancel obsolete work:
controller.abort();这是解释结构的代码骨架，外部函数与数据需要在实际项目中实现。
04 / 贯穿案例
放进真实情境里看
搜索框连续输入会发出多次查询。旧请求如果后返回可能覆盖新结果；取消旧请求或核对请求 ID，才能保证屏幕对应当前输入。
- 01
分析边界
异步任务存在等待、成功、失败与取消。请求可能乱序返回，离开页面后可能继续运行。用 AbortController 取消无用请求，检查 HTTP 状态，并区分可重试的网络失败与不可重试的权限或参数错误。
- 02
观察具体过程
搜索框连续输入会发出多次查询。旧请求如果后返回可能覆盖新结果；取消旧请求或核对请求 ID，才能保证屏幕对应当前输入。
- 03
验证失败路径
不要对所有失败无限重试。写请求可能重复产生副作用，重试前要检查幂等性、预算和用户是否仍需要这次操作。
05 / 动手做
用自己的产物检验理解
实现可取消搜索，模拟慢响应与断网，确保旧结果不会覆盖当前搜索条件。
完成时检查
- 提交可阅读的实现或流程图，并注明输入和输出。
- 至少覆盖一个成功案例与一个失败案例。
- 解释本课的边界，写出仍未解决的一项限制。
自动保存在当前浏览器，不会同步到账户。
06 / 检查点