@yh-ui/request
A modern HTTP request library for enterprise applications, AI applications, and general-purpose scenarios
Feature Coverage
| Capability | Status | Notes |
|---|---|---|
| Basic Requests | ✅ Complete | GET/POST/PUT/DELETE, supports generics & inference |
| Interceptors | ✅ Complete | Request/response interceptors, error handling |
| Caching | ✅ Complete | In-memory, LocalStorage, IndexedDB, SWR |
| HTTP Cache Protocol | ✅ Complete | ETag, Last-Modified conditional requests |
| Retry | ✅ Complete | Exponential backoff, custom retry conditions |
| Concurrency Control | ✅ Complete | Deduplication, debounce, throttle |
| Upload/Download | ✅ Complete | Progress tracking, pause/resume |
| WebSocket | ✅ Complete | Connection management |
| GraphQL | ✅ Complete | Query builder |
| Security | ✅ Complete | CSRF protection, token auto-refresh |
| Vue Hooks | ✅ Complete | useRequest, useSSE, useAIStream, useQueue, etc. |
| SSR Support | ✅ Complete | SSR compatible |
| Adapter Architecture | ✅ Complete | Browser/Node.js/Deno/Bun/Edge |
| Plugin System | ✅ Complete | Extensible plugins |
Compared with Mainstream Options
| Feature | @yh-ui/request | Axios | @tanstack/query |
|---|---|---|---|
| Positioning | Request lib + Hooks | Pure HTTP client | Server-state management |
| TypeScript | ✅ | ✅ | ✅ |
| SWR Caching | ✅ | ❌ (wrap yourself) | ✅ built-in |
| Streaming (SSE) | ✅ useSSE | ❌ (wrap yourself) | ❌ |
| AI Streaming Output | ✅ useAIStream | ❌ | ❌ |
| Request Queue | ✅ useQueue / useRequestQueue | ❌ | ❌ |
| Plugin System | ✅ | ❌ | ✅ (devtools, etc.) |
| Cross-Platform | ✅ | ❌ browser-only | ✅ |
| Enterprise Security | ✅ CSRF/Token | ❌ (implement yourself) | ❌ |
Core Advantages
1. Strict Type Safety
Full-chain TypeScript type inference, from request to response, zero any, farewell to type errors.
typescript
// Auto-infer response type
const { data } = await request.get<User>('/api/users/1')
// data: User ✓
// Path parameter type safety
type Params = PathParams<'/api/users/:id/:commentId'>
// => { id: string; commentId: string } ✓2. Powerful Vue Hooks
One line of code handles loading states, error handling, cache updates - no more repetitive boilerplate.
typescript
const { data, loading, error, run } = useRequest(() => fetchUser(id), {
manual: false,
defaultParams: [1],
onSuccess: (data) => console.log(data)
})3. Enterprise-Grade Features Out of the Box
No additional configuration needed - request retry, concurrency control, progress monitoring, security protection and more come ready to use.
- Request retry with exponential backoff
- Request deduplication and debouncing
- Concurrency control
- Upload/Download progress
- CSRF protection and token auto-refresh
Features
- TypeScript First: Full type inference throughout the chain, zero
any, generics throughout request/response - Adapter Architecture: Pluggable underlying implementation, unified API across platforms
- Composition over Inheritance: Plugin-based, middleware-based, load on demand
- Built-in Observability: Request ID, metrics, debug mode out of the box
Installation
bash
npm install @yh-ui/requestbash
yarn add @yh-ui/requestbash
pnpm add @yh-ui/requestbash
bun add @yh-ui/requestQuick Start
typescript
import { request } from '@yh-ui/request'
// GET request
const { data } = await request.get('/api/users')
// POST request
const { data } = await request.post('/api/users', { name: 'John' })
// With generics
interface User {
id: number
name: string
}
const { data } = await request.get<User>('/api/users/1')Feature Overview
| Feature | Description |
|---|---|
| Request Config | Complete request configuration options |
| Response Handling | Response data parsing and type inference |
| Interceptors | Request/Response interceptors |
| Cache Strategy | In-memory, persistent, and SWR caching |
| HTTP Cache Protocol | ETag, Last-Modified conditional requests |
| Security | CSRF protection, token auto-refresh |
| Adapter | Cross-platform adapters (Browser/Node/Deno/Bun/Edge) |
| GraphQL | GraphQL query builder and client |
| WebSocket | WebSocket connection management |
| useRequest | Powerful Vue request Hook |
| useSSE | Server-Sent Events streaming |
| useAIStream | AI streaming output support |
Next Steps
- Installation Guide - Detailed installation configuration
- Basic Usage - Quick start examples
- Request Config - Complete configuration options