@yh-ui/request 1.0.5 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +49 -234
- package/package.json +4 -3
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,274 +1,89 @@
|
|
|
1
1
|
# @yh-ui/request
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
<img src="https://raw.githubusercontent.com/1079161148/yh-ui/main/docs/public/logo.svg" width="100" height="100" alt="YH-UI Logo">
|
|
5
|
-
</p>
|
|
3
|
+
YH-UI 的 Vue 3 请求管理包。它基于 Fetch 和 Composition API，把请求实例、拦截器、重试、取消、缓存、SSE、AI Stream、分页、队列、GraphQL、WebSocket 和 HTTP 缓存协议整理成可组合的 API。
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
[Documentation](https://1079161148.github.io/yh-ui/) | [GitHub](https://github.com/1079161148/yh-ui)
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
响应式请求状态 · SSE 流式支持 · 自动取消 · 重试机制 · 缓存管理 · 完整 TypeScript
|
|
11
|
-
</p>
|
|
7
|
+
## Highlights
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</a>
|
|
20
|
-
<a href="https://github.com/1079161148/yh-ui/blob/main/LICENSE">
|
|
21
|
-
<img src="https://img.shields.io/npm/l/@yh-ui/request.svg?style=flat-square" alt="license">
|
|
22
|
-
</a>
|
|
23
|
-
</p>
|
|
9
|
+
- 请求实例：`Request`、`request`、`createRequest` 提供 baseURL、params、headers、timeout、retry、abort 和拦截器能力。
|
|
10
|
+
- Vue Hooks：`useRequest`、`useRequestSWR`、`useRequestPolling`、`usePagination`、`useLoadMore` 处理页面常见数据状态。
|
|
11
|
+
- 流式能力：`useSSE` 和 `useAIStream` 适合通知推送、日志输出和 AI 增量响应。
|
|
12
|
+
- 并发控制：`useQueue`、`useRequestQueue` 用于限制并发、排队执行和管理批量任务。
|
|
13
|
+
- 协议扩展：导出 adapters、cache、interceptors、graphql、websocket、http-cache，便于统一企业接口层。
|
|
14
|
+
- TypeScript 友好：请求参数、响应数据、错误对象和 hook 返回值都有类型声明。
|
|
24
15
|
|
|
25
|
-
|
|
16
|
+
## Install
|
|
26
17
|
|
|
27
|
-
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add @yh-ui/request
|
|
20
|
+
```
|
|
28
21
|
|
|
29
|
-
|
|
30
|
-
- 🌊 **SSE 流式支持** — 原生支持 Server-Sent Events，完美配合 AI 流式输出
|
|
31
|
-
- 🔄 **自动重试** — 可配置指数退避重试策略
|
|
32
|
-
- 🚫 **自动取消** — 组件卸载时自动中止 fetch，防止内存泄漏
|
|
33
|
-
- 🗄 **请求缓存** — 内置 LRU 缓存，支持 TTL 过期策略
|
|
34
|
-
- 🔌 **拦截器** — 支持请求/响应拦截器，方便处理鉴权、日志等
|
|
35
|
-
- 🌐 **SSR 安全** — 服务端环境无副作用
|
|
22
|
+
## Request Instance
|
|
36
23
|
|
|
37
|
-
|
|
24
|
+
```ts
|
|
25
|
+
import { createRequest } from '@yh-ui/request'
|
|
38
26
|
|
|
39
|
-
|
|
27
|
+
const api = createRequest({
|
|
28
|
+
baseURL: '/api',
|
|
29
|
+
timeout: 10000,
|
|
30
|
+
retry: 2
|
|
31
|
+
})
|
|
40
32
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
33
|
+
api.interceptors.request.use((config) => {
|
|
34
|
+
config.headers = {
|
|
35
|
+
...config.headers,
|
|
36
|
+
Authorization: `Bearer ${getToken()}`
|
|
37
|
+
}
|
|
38
|
+
return config
|
|
39
|
+
})
|
|
44
40
|
|
|
45
|
-
|
|
46
|
-
npm install @yh-ui/request
|
|
41
|
+
const users = await api.get('/users')
|
|
47
42
|
```
|
|
48
43
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
## 🔨 快速开始
|
|
52
|
-
|
|
53
|
-
### `useRequest` — 基础请求
|
|
44
|
+
## useRequest
|
|
54
45
|
|
|
55
46
|
```vue
|
|
56
47
|
<script setup lang="ts">
|
|
57
|
-
import { useRequest } from '@yh-ui/request'
|
|
48
|
+
import { createRequest, useRequest } from '@yh-ui/request'
|
|
58
49
|
|
|
59
50
|
interface User {
|
|
60
51
|
id: number
|
|
61
52
|
name: string
|
|
62
|
-
email: string
|
|
63
53
|
}
|
|
64
54
|
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
onError: (err) => console.error('失败:', err)
|
|
72
|
-
}
|
|
73
|
-
)
|
|
55
|
+
const api = createRequest({ baseURL: '/api' })
|
|
56
|
+
|
|
57
|
+
const { data, loading, error, refresh, run } = useRequest<User[]>(() => api.get<User[]>('/users'), {
|
|
58
|
+
manual: false,
|
|
59
|
+
onSuccess: (users) => console.log(users.length)
|
|
60
|
+
})
|
|
74
61
|
</script>
|
|
75
62
|
|
|
76
63
|
<template>
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
<button @click="refresh">刷新</button>
|
|
84
|
-
</div>
|
|
64
|
+
<button :disabled="loading" @click="refresh">Refresh</button>
|
|
65
|
+
<button @click="run()">Run</button>
|
|
66
|
+
<pre v-if="error">{{ error.message }}</pre>
|
|
67
|
+
<ul>
|
|
68
|
+
<li v-for="user in data" :key="user.id">{{ user.name }}</li>
|
|
69
|
+
</ul>
|
|
85
70
|
</template>
|
|
86
71
|
```
|
|
87
72
|
|
|
88
|
-
|
|
73
|
+
## Streaming
|
|
89
74
|
|
|
90
75
|
```ts
|
|
91
|
-
import { useRequest } from '@yh-ui/request'
|
|
92
|
-
|
|
93
|
-
const { data, loading, execute } = useRequest(fetchUserData, {
|
|
94
|
-
immediate: false, // 手动触发
|
|
95
|
-
retry: 3, // 失败重试 3 次
|
|
96
|
-
retryDelay: 1000, // 重试间隔（支持指数退避）
|
|
97
|
-
cache: true, // 开启缓存
|
|
98
|
-
cacheTTL: 60000, // 缓存 60 秒
|
|
99
|
-
debounce: 300, // 防抖 300ms
|
|
100
|
-
throttle: 0, // 节流（ms），0 为关闭
|
|
101
|
-
timeout: 10000 // 请求超时 10s
|
|
102
|
-
})
|
|
103
|
-
|
|
104
|
-
// 手动触发
|
|
105
|
-
await execute()
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
### `useSSE` — Server-Sent Events 流式
|
|
109
|
-
|
|
110
|
-
```vue
|
|
111
|
-
<script setup lang="ts">
|
|
112
|
-
import { ref } from 'vue'
|
|
113
76
|
import { useSSE } from '@yh-ui/request'
|
|
114
77
|
|
|
115
|
-
const
|
|
116
|
-
|
|
117
|
-
const { isConnected, connect, disconnect, error } = useSSE('/api/chat/stream', {
|
|
118
|
-
onMessage: (event) => {
|
|
119
|
-
const data = JSON.parse(event.data)
|
|
120
|
-
if (data.done) {
|
|
121
|
-
disconnect()
|
|
122
|
-
return
|
|
123
|
-
}
|
|
124
|
-
messages.value.push(data.content)
|
|
125
|
-
},
|
|
126
|
-
onOpen: () => console.log('连接建立'),
|
|
127
|
-
onError: (err) => console.error('SSE 错误:', err),
|
|
128
|
-
// 自动重连
|
|
78
|
+
const { isConnected, connect, disconnect, error } = useSSE('/api/events', {
|
|
129
79
|
reconnect: true,
|
|
130
80
|
reconnectInterval: 3000,
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
</script>
|
|
134
|
-
|
|
135
|
-
<template>
|
|
136
|
-
<div>
|
|
137
|
-
<div class="status">{{ isConnected ? '🟢 已连接' : '🔴 未连接' }}</div>
|
|
138
|
-
<button @click="connect">开始</button>
|
|
139
|
-
<button @click="disconnect">停止</button>
|
|
140
|
-
<div v-for="(msg, i) in messages" :key="i">{{ msg }}</div>
|
|
141
|
-
</div>
|
|
142
|
-
</template>
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
### `usePagination` — 分页请求
|
|
146
|
-
|
|
147
|
-
```vue
|
|
148
|
-
<script setup lang="ts">
|
|
149
|
-
import { usePagination } from '@yh-ui/request'
|
|
150
|
-
|
|
151
|
-
const { data, loading, page, pageSize, total, prev, next, goTo, refresh } = usePagination(
|
|
152
|
-
({ page, pageSize }) => fetch(`/api/list?page=${page}&size=${pageSize}`).then((r) => r.json()),
|
|
153
|
-
{
|
|
154
|
-
initialPage: 1,
|
|
155
|
-
initialPageSize: 20,
|
|
156
|
-
immediate: true
|
|
157
|
-
}
|
|
158
|
-
)
|
|
159
|
-
</script>
|
|
160
|
-
|
|
161
|
-
<template>
|
|
162
|
-
<div>
|
|
163
|
-
<table>
|
|
164
|
-
<tr v-for="item in data?.list" :key="item.id">
|
|
165
|
-
<td>{{ item.name }}</td>
|
|
166
|
-
</tr>
|
|
167
|
-
</table>
|
|
168
|
-
<div class="pagination">
|
|
169
|
-
<button @click="prev" :disabled="page === 1">上一页</button>
|
|
170
|
-
<span>{{ page }} / {{ Math.ceil(total / pageSize) }}</span>
|
|
171
|
-
<button @click="next">下一页</button>
|
|
172
|
-
</div>
|
|
173
|
-
</div>
|
|
174
|
-
</template>
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
### `useInfiniteScroll` — 无限滚动
|
|
178
|
-
|
|
179
|
-
```ts
|
|
180
|
-
import { ref } from 'vue'
|
|
181
|
-
import { useInfiniteScroll } from '@yh-ui/request'
|
|
182
|
-
|
|
183
|
-
const containerRef = ref<HTMLElement>()
|
|
184
|
-
|
|
185
|
-
const { data, loading, hasMore, loadMore } = useInfiniteScroll(
|
|
186
|
-
(cursor) => fetch(`/api/feed?cursor=${cursor}`).then((r) => r.json()),
|
|
187
|
-
{
|
|
188
|
-
target: containerRef, // 自动监听此元素的滚动触底
|
|
189
|
-
threshold: 200, // 距离底部 200px 时触发
|
|
190
|
-
getCursor: (lastPage) => lastPage.nextCursor
|
|
191
|
-
}
|
|
192
|
-
)
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
---
|
|
196
|
-
|
|
197
|
-
## ⚙️ 拦截器配置
|
|
198
|
-
|
|
199
|
-
```ts
|
|
200
|
-
import { createRequestInstance } from '@yh-ui/request'
|
|
201
|
-
|
|
202
|
-
const request = createRequestInstance({
|
|
203
|
-
baseURL: 'https://api.example.com',
|
|
204
|
-
timeout: 10000,
|
|
205
|
-
// 请求拦截器
|
|
206
|
-
onRequest: (config) => {
|
|
207
|
-
config.headers['Authorization'] = `Bearer ${getToken()}`
|
|
208
|
-
return config
|
|
209
|
-
},
|
|
210
|
-
// 响应拦截器
|
|
211
|
-
onResponse: (response) => {
|
|
212
|
-
if (response.code !== 0) throw new Error(response.message)
|
|
213
|
-
return response.data
|
|
214
|
-
},
|
|
215
|
-
// 错误拦截器
|
|
216
|
-
onError: (error) => {
|
|
217
|
-
if (error.status === 401) router.push('/login')
|
|
81
|
+
onMessage: (event) => {
|
|
82
|
+
console.log(event.data)
|
|
218
83
|
}
|
|
219
84
|
})
|
|
220
|
-
|
|
221
|
-
// 在组件中使用
|
|
222
|
-
const { data } = useRequest(() => request.get('/users'))
|
|
223
85
|
```
|
|
224
86
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
## 📚 API 参考
|
|
228
|
-
|
|
229
|
-
### `useRequest(fetcher, options?)`
|
|
230
|
-
|
|
231
|
-
| 参数 | 类型 | 默认值 | 说明 |
|
|
232
|
-
| ------------- | ---------------------- | ------- | -------------------------- |
|
|
233
|
-
| `immediate` | `boolean` | `true` | 是否立即执行 |
|
|
234
|
-
| `initialData` | `T \| null` | `null` | 初始数据值 |
|
|
235
|
-
| `retry` | `number` | `0` | 失败重试次数 |
|
|
236
|
-
| `retryDelay` | `number` | `1000` | 重试延迟（ms） |
|
|
237
|
-
| `cache` | `boolean` | `false` | 是否开启缓存 |
|
|
238
|
-
| `cacheTTL` | `number` | `0` | 缓存有效期（ms），0 为永久 |
|
|
239
|
-
| `debounce` | `number` | `0` | 防抖延迟（ms） |
|
|
240
|
-
| `timeout` | `number` | `0` | 超时时间（ms），0 为不限制 |
|
|
241
|
-
| `onSuccess` | `(data: T) => void` | — | 成功回调 |
|
|
242
|
-
| `onError` | `(err: Error) => void` | — | 失败回调 |
|
|
243
|
-
| `onFinally` | `() => void` | — | 完成回调 |
|
|
244
|
-
|
|
245
|
-
### 返回值
|
|
246
|
-
|
|
247
|
-
| 属性/方法 | 类型 | 说明 |
|
|
248
|
-
| ------------------ | -------------------- | -------------------- |
|
|
249
|
-
| `data` | `Ref<T \| null>` | 响应数据 |
|
|
250
|
-
| `loading` | `Ref<boolean>` | 加载状态 |
|
|
251
|
-
| `error` | `Ref<Error \| null>` | 错误信息 |
|
|
252
|
-
| `execute(...args)` | `Promise<T>` | 手动执行 |
|
|
253
|
-
| `refresh()` | `Promise<T>` | 使用上次参数重新执行 |
|
|
254
|
-
| `abort()` | `void` | 中止当前请求 |
|
|
255
|
-
| `reset()` | `void` | 重置状态到初始值 |
|
|
256
|
-
|
|
257
|
-
---
|
|
258
|
-
|
|
259
|
-
## ⚠️ 注意事项
|
|
260
|
-
|
|
261
|
-
- **自动中止**：组件卸载时会自动调用 `abort()`，无需手动清理
|
|
262
|
-
- **SSR**：`useSSE`、`useInfiniteScroll` 在服务端不会自动连接，仅在 `onMounted` 后激活
|
|
263
|
-
- **并发请求**：默认取消上一次未完成的请求（竞态条件保护），可通过 `cancelPrevious: false` 关闭
|
|
264
|
-
|
|
265
|
-
---
|
|
266
|
-
|
|
267
|
-
## 🔗 相关资源
|
|
268
|
-
|
|
269
|
-
- [📖 官方文档](https://1079161148.github.io/yh-ui/)
|
|
270
|
-
- [📦 GitHub 仓库](https://github.com/1079161148/yh-ui)
|
|
271
|
-
|
|
272
|
-
## 📄 开源协议
|
|
87
|
+
## License
|
|
273
88
|
|
|
274
|
-
MIT
|
|
89
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yh-ui/request",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "YH-UI HTTP request hooks - Enterprise-grade request management",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -17,13 +17,14 @@
|
|
|
17
17
|
"types": "./dist/*.d.ts",
|
|
18
18
|
"import": "./dist/*.mjs",
|
|
19
19
|
"require": "./dist/*.cjs"
|
|
20
|
-
}
|
|
20
|
+
},
|
|
21
|
+
"./package.json": "./package.json"
|
|
21
22
|
},
|
|
22
23
|
"files": [
|
|
23
24
|
"dist"
|
|
24
25
|
],
|
|
25
26
|
"dependencies": {
|
|
26
|
-
"@yh-ui/utils": "^1.0.
|
|
27
|
+
"@yh-ui/utils": "^1.0.8"
|
|
27
28
|
},
|
|
28
29
|
"devDependencies": {
|
|
29
30
|
"vue": "^3.5.27",
|