显式触发并展示 React 请求

前提

使用已有 React 应用，按完整 React 示例安装依赖并设置入口文件。无需后端的验证可直接运行该页 Storybook 命令。受控服务分别返回用户数组、HTTP 500 错误，以及延迟 2000 ms 的结果。

挂载完整组件

按完整示例运行仓库夹具，或复制 ReactRequests.tsx，通过该页消费者入口挂载 <ReactRequests />。维护中的文件包含完整实现；请求行为保留在那里，不必复制到多层包装中。

组件按 baseURL memoize Fetcher，向 useFetcher 显式传入 JSON 提取器，并将各按钮绑定到 execute({ url })。应用从 Hook 读取 result、error、loading 和 status。execute() 解析为请求结束时的状态（success、error，取消时为 idle）；组件用 void 忽略它，因为它按 Hook 状态渲染。

检查各个可见状态

1. 点击 Load，请求进入 loading，随后在仓库夹具中显示 Ada, Lin。
2. 点击 Fail，非 2xx 响应展示错误，不作为用户结果成功显示。
3. 点击 Load slow，在 2000 ms 内点击 Cancel。Hook 回到 idle。等待超过延迟，确认晚到的 completed 不会覆盖状态。
4. 再次点击 Load，确认取消后仍能启动新请求。

接入自己的应用时，/api/users 必须返回用户 JSON 数组，/api/error 返回非 2xx，/api/slow 延迟返回 JSON 对象 { "status": "completed" }。这些是需要应用提供的演示路由，Hook 不会创建它们。

错误与清理

执行错误保存到 Hook 状态；execute() 从不拒绝。需要根据结果行动（例如成功后跳转）时，await 它并按 status 分支：

const { status } = await request.execute({ url: '/users' });
if (status === 'success') navigate('/users');

新执行会取消前一个请求，只有最新且仍挂载的执行能够发布状态。abort() 取消在途请求；reset() 还会清除已完成的结果。卸载会清理拥有的请求。这些保护不提供全局查询缓存，也不能撤销服务端已经完成的操作。

继续阅读输入驱动查询、清理资源、Hook 参考与状态归属。