实战案例

本页面汇集了 @yh-ui/request 在企业后台管理系统中的典型实战场景。每个案例都经过深度优化，集成了最佳实践，旨在帮助你应对复杂的业务需求。

---

目录

• 目录
• UI 交互反馈
  • 1. 差异化 Loading 策略
  • 2. 防抖搜索与快速切换
  • 3. 企业级分页列表
  • 4. 模拟大文件分片上传
• 工程化核心能力
  • 5. 认证拦截与无感刷新
  • 6. 请求健稳性：重试与去重
  • 7. 数据流转：缓存 (SWR) 与状态
• AI 业务场景
  • 8. 流式输出与思考过程
  • 9. 全能工程化最佳实践

---

UI 交互反馈

1. 差异化 Loading 策略

Loading 策略演示

---

2. 防抖搜索与快速切换

全部已完成

暂无数据

高级交互演示

---

3. 企业级分页列表

标题

暂无数据

标准列表页

---

4. 模拟大文件分片上传

分片上传模拟

TIP

大文件分片上传核心思路：

1. 切片：前端利用 Blob.prototype.slice 将文件切割成固定大小（如 2MB）的二进制块。
2. 并发控制：控制同时发送的分片请求数量，避免阻塞浏览器其他业务请求。
3. 断点续传：上传前计算文件 Hash，查询后台已收到的切片，只传缺失部分。
4. 合并：所有分片上传完成后，发送合并请求通知后台拼装文件。
5. 性能优化：文件 Hash 计算属于 CPU 密集型任务，大型文件建议在 Web Worker 中处理，避免阻塞主线程导致页面卡顿。

---

工程化核心能力

5. 认证拦截与无感刷新

认证状态：正常

Current Token: yh-ui-init-t...

Token 自动注入与失效刷新

6. 请求健稳性：重试与去重

Waiting for logs...

自动重试与并发控制

7. 数据流转：缓存 (SWR) 与状态

SWR 已激活

该接口数据已进入强缓存，切换页面后可立即展示。

Loading...

SWR 数据缓存与同步

---

AI 业务场景

8. 流式输出与思考过程

AI 对话流式交互

TIP

AI 场景下的请求优化：

1. 流式传输：使用 useAIStream 处理分块数据，避免长时间等待。
2. 打字机效果：通过 onText 回调实时追加入 UI，通过 CSS 动画模拟光标。
3. 状态拆分：将 “思考中 (thinking)” 和 “回答中 (text)” 状态解耦，提供更好的心理预期。

9. 全能工程化最佳实践

在大型企业级项目中，通常需要对请求库进行二次封装以统一处理 Token 注入、响应格式化、错误全局拦截、断网重连等。以下是基于 @yh-ui/request 的全能配置方案：

RESTful & 局部 Loading

文件处理

去重与重试

WebSocket

WS 已连接

最新消息：Temperature: 24°C

AI 助手 (流式输出)

等待发问...

全能实战配置与交互

TIP

工程化架构建议：

1. 实例隔离：为不同类型的业务（如：主系统、地图引擎、AI 网关）创建不同的 request 实例，配置独立的拦截器。
2. 防御性编程：在拦截器中始终检查 config.headers，使用解构赋值而非直接操作，避免 HMR 或特殊请求下的 undefined 报错。
3. 统一类型约束：利用 TypeScript 的泛型能力定义全局 ResponseStructure，确保前端开发体验。
4. 资源清理：在组件卸载（onUnmounted）时，务必调用 cancel() 或关闭 WebSocket，防止内存泄漏。