Practical Cases

This page collects typical practical scenarios of @yh-ui/request in Enterprise Admin Systems. Each case is deeply optimized and integrates best practices to help you handle complex business requirements.

---

Table of Contents

• Table of Contents
• UI Interaction Feedback
  • 1. Differentiated Loading Strategy
  • 2. Debounced Search & Rapid Switching
  • 3. Enterprise-grade Pagination List
  • 4. Simulated Chunked Upload
• Engineering Core Capabilities
  • 5. Auth Interceptor & Silent Refresh
  • 6. Resilience: Retry & Deduplication
  • 7. Data Flow: Cache (SWR) & State
• AI Practical Scenarios
  • 8. Streaming & Thinking Process
  • 9. Ultimate Engineering Best Practice

---

UI Interaction Feedback

1. Differentiated Loading Strategy

Loading Strategy Demo

---

2. Debounced Search & Rapid Switching

AllCompleted

No Data

Advanced Interaction Demo

---

3. Enterprise-grade Pagination List

Title

No Data

Standard List Page

---

4. Simulated Chunked Upload

Chunked Upload Simulation

TIP

Large File Chunked Upload Strategy:

1. Slicing: Use Blob.prototype.slice on the frontend to partition files into fixed-size (e.g., 2MB) binary chunks.
2. Concurrency Control: Limit concurrent chunk upload requests to avoid blocking other business traffic in the browser.
3. Resume Support: Calculate the file Hash before uploading to identify chunks already received by the backend, uploading only the missing parts.
4. Merging: After all chunks are successfully uploaded, send a merge request to notify the backend to assemble the file.
5. Performance: As file hashing is CPU-intensive, it is best to perform it in a Web Worker for large files to prevent main thread blocking and UI stuttering.

---

Engineering Core Capabilities

5. Auth Interceptor & Silent Refresh

Auth Status: OK

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

Auth Token Injection & Refresh

6. Resilience: Retry & Deduplication

Waiting for logs...

Auto Retry & Concurrency Control

7. Data Flow: Cache (SWR) & State

SWR Active

Data entered cache, instantly available on return.

Loading...

SWR Data Cache & Sync

---

AI Practical Scenarios

8. Streaming & Thinking Process

AI Chat Streaming Interaction

TIP

Optimizing Requests for AI:

1. Streaming: Use useAIStream to handle chunked data and avoid long waits.
2. Typewriter Effect: Append data to UI in real-time via onText callback.
3. State Separation: Decouple "thinking" and "text" states to manage user expectations.

9. Ultimate Engineering Best Practice

In large-scale enterprise projects, it's common practice to wrap the request library to handle token injection, response formatting, global error handling, and reconnection. Here is a full-featured configuration based on @yh-ui/request:

RESTful & Local Loading

File Operations

Deduplication & Retry

WebSocket

WS Connected

Latest Msg: Temperature: 24°C

AI Assistant (Streaming Output)

Waiting for query...

Full-Featured Config & Interaction

TIP

Architectural Recommendations:

1. Instance Isolation: Create separate request instances for different business domains (e.g., Main App, Map Engine, AI Gateway) with independent interceptors.
2. Defensive Coding: Always check config.headers in interceptors. Use spread/destructuring instead of direct assignment to avoid undefined errors during HMR.
3. Unified Type Constraints: Use TypeScript generics to define a global ResponseStructure, ensuring a consistent development experience.
4. Resource Cleanup: Always call cancel() or close WebSockets in onUnmounted to prevent memory leaks.