@yh-ui/request 0.1.21

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present YH-UI Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,274 @@
+# @yh-ui/request
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/1079161148/yh-ui/main/docs/public/logo.svg" width="100" height="100" alt="YH-UI Logo">
+</p>
+
+<h3 align="center">YH-UI Request — 企业级请求管理 Hooks</h3>
+
+<p align="center">
+  响应式请求状态 · SSE 流式支持 · 自动取消 · 重试机制 · 缓存管理 · 完整 TypeScript
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@yh-ui/request">
+    <img src="https://img.shields.io/npm/v/@yh-ui/request.svg?style=flat-square&colorB=409eff" alt="npm version">
+  </a>
+  <a href="https://www.npmjs.com/package/@yh-ui/request">
+    <img src="https://img.shields.io/npm/dm/@yh-ui/request.svg?style=flat-square&colorB=409eff" alt="npm downloads">
+  </a>
+  <a href="https://github.com/1079161148/yh-ui/blob/main/LICENSE">
+    <img src="https://img.shields.io/npm/l/@yh-ui/request.svg?style=flat-square" alt="license">
+  </a>
+</p>
+
+---
+
+## ✨ 特性
+
+- ⚡ **响应式状态** — `data`、`loading`、`error` 全部是 Vue 响应式引用，无需手动管理
+- 🌊 **SSE 流式支持** — 原生支持 Server-Sent Events，完美配合 AI 流式输出
+- 🔄 **自动重试** — 可配置指数退避重试策略
+- 🚫 **自动取消** — 组件卸载时自动中止 fetch，防止内存泄漏
+- 🗄 **请求缓存** — 内置 LRU 缓存，支持 TTL 过期策略
+- 🔌 **拦截器** — 支持请求/响应拦截器，方便处理鉴权、日志等
+- 🌐 **SSR 安全** — 服务端环境无副作用
+
+---
+
+## 📦 安装
+
+```bash
+# pnpm（推荐）
+pnpm add @yh-ui/request
+
+# npm
+npm install @yh-ui/request
+```
+
+---
+
+## 🔨 快速开始
+
+### `useRequest` — 基础请求
+
+```vue
+<script setup lang="ts">
+import { useRequest } from '@yh-ui/request'
+
+interface User {
+  id: number
+  name: string
+  email: string
+}
+
+const { data, loading, error, execute, refresh } = useRequest<User[]>(
+  () => fetch('/api/users').then((r) => r.json()),
+  {
+    immediate: true, // 立即执行
+    initialData: [], // 初始值
+    onSuccess: (data) => console.log('成功:', data),
+    onError: (err) => console.error('失败:', err)
+  }
+)
+</script>
+
+<template>
+  <div>
+    <div v-if="loading">加载中...</div>
+    <div v-if="error">错误: {{ error.message }}</div>
+    <ul v-if="data">
+      <li v-for="user in data" :key="user.id">{{ user.name }}</li>
+    </ul>
+    <button @click="refresh">刷新</button>
+  </div>
+</template>
+```
+
+### `useRequest` — 高级配置
+
+```ts
+import { useRequest } from '@yh-ui/request'
+
+const { data, loading, execute } = useRequest(fetchUserData, {
+  immediate: false, // 手动触发
+  retry: 3, // 失败重试 3 次
+  retryDelay: 1000, // 重试间隔（支持指数退避）
+  cache: true, // 开启缓存
+  cacheTTL: 60000, // 缓存 60 秒
+  debounce: 300, // 防抖 300ms
+  throttle: 0, // 节流（ms），0 为关闭
+  timeout: 10000 // 请求超时 10s
+})
+
+// 手动触发
+await execute()
+```
+
+### `useSSE` — Server-Sent Events 流式
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useSSE } from '@yh-ui/request'
+
+const messages = ref<string[]>([])
+
+const { isConnected, connect, disconnect, error } = useSSE('/api/chat/stream', {
+  onMessage: (event) => {
+    const data = JSON.parse(event.data)
+    if (data.done) {
+      disconnect()
+      return
+    }
+    messages.value.push(data.content)
+  },
+  onOpen: () => console.log('连接建立'),
+  onError: (err) => console.error('SSE 错误:', err),
+  // 自动重连
+  reconnect: true,
+  reconnectInterval: 3000,
+  maxReconnectAttempts: 5
+})
+</script>
+
+<template>
+  <div>
+    <div class="status">{{ isConnected ? '🟢 已连接' : '🔴 未连接' }}</div>
+    <button @click="connect">开始</button>
+    <button @click="disconnect">停止</button>
+    <div v-for="(msg, i) in messages" :key="i">{{ msg }}</div>
+  </div>
+</template>
+```
+
+### `usePagination` — 分页请求
+
+```vue
+<script setup lang="ts">
+import { usePagination } from '@yh-ui/request'
+
+const { data, loading, page, pageSize, total, prev, next, goTo, refresh } = usePagination(
+  ({ page, pageSize }) => fetch(`/api/list?page=${page}&size=${pageSize}`).then((r) => r.json()),
+  {
+    initialPage: 1,
+    initialPageSize: 20,
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <div>
+    <table>
+      <tr v-for="item in data?.list" :key="item.id">
+        <td>{{ item.name }}</td>
+      </tr>
+    </table>
+    <div class="pagination">
+      <button @click="prev" :disabled="page === 1">上一页</button>
+      <span>{{ page }} / {{ Math.ceil(total / pageSize) }}</span>
+      <button @click="next">下一页</button>
+    </div>
+  </div>
+</template>
+```
+
+### `useInfiniteScroll` — 无限滚动
+
+```ts
+import { ref } from 'vue'
+import { useInfiniteScroll } from '@yh-ui/request'
+
+const containerRef = ref<HTMLElement>()
+
+const { data, loading, hasMore, loadMore } = useInfiniteScroll(
+  (cursor) => fetch(`/api/feed?cursor=${cursor}`).then((r) => r.json()),
+  {
+    target: containerRef, // 自动监听此元素的滚动触底
+    threshold: 200, // 距离底部 200px 时触发
+    getCursor: (lastPage) => lastPage.nextCursor
+  }
+)
+```
+
+---
+
+## ⚙️ 拦截器配置
+
+```ts
+import { createRequestInstance } from '@yh-ui/request'
+
+const request = createRequestInstance({
+  baseURL: 'https://api.example.com',
+  timeout: 10000,
+  // 请求拦截器
+  onRequest: (config) => {
+    config.headers['Authorization'] = `Bearer ${getToken()}`
+    return config
+  },
+  // 响应拦截器
+  onResponse: (response) => {
+    if (response.code !== 0) throw new Error(response.message)
+    return response.data
+  },
+  // 错误拦截器
+  onError: (error) => {
+    if (error.status === 401) router.push('/login')
+  }
+})
+
+// 在组件中使用
+const { data } = useRequest(() => request.get('/users'))
+```
+
+---
+
+## 📚 API 参考
+
+### `useRequest(fetcher, options?)`
+
+| 参数          | 类型                   | 默认值  | 说明                       |
+| ------------- | ---------------------- | ------- | -------------------------- |
+| `immediate`   | `boolean`              | `true`  | 是否立即执行               |
+| `initialData` | `T \| null`            | `null`  | 初始数据值                 |
+| `retry`       | `number`               | `0`     | 失败重试次数               |
+| `retryDelay`  | `number`               | `1000`  | 重试延迟（ms）             |
+| `cache`       | `boolean`              | `false` | 是否开启缓存               |
+| `cacheTTL`    | `number`               | `0`     | 缓存有效期（ms），0 为永久 |
+| `debounce`    | `number`               | `0`     | 防抖延迟（ms）             |
+| `timeout`     | `number`               | `0`     | 超时时间（ms），0 为不限制 |
+| `onSuccess`   | `(data: T) => void`    | —       | 成功回调                   |
+| `onError`     | `(err: Error) => void` | —       | 失败回调                   |
+| `onFinally`   | `() => void`           | —       | 完成回调                   |
+
+### 返回值
+
+| 属性/方法          | 类型                 | 说明                 |
+| ------------------ | -------------------- | -------------------- |
+| `data`             | `Ref<T \| null>`     | 响应数据             |
+| `loading`          | `Ref<boolean>`       | 加载状态             |
+| `error`            | `Ref<Error \| null>` | 错误信息             |
+| `execute(...args)` | `Promise<T>`         | 手动执行             |
+| `refresh()`        | `Promise<T>`         | 使用上次参数重新执行 |
+| `abort()`          | `void`               | 中止当前请求         |
+| `reset()`          | `void`               | 重置状态到初始值     |
+
+---
+
+## ⚠️ 注意事项
+
+- **自动中止**：组件卸载时会自动调用 `abort()`，无需手动清理
+- **SSR**：`useSSE`、`useInfiniteScroll` 在服务端不会自动连接，仅在 `onMounted` 后激活
+- **并发请求**：默认取消上一次未完成的请求（竞态条件保护），可通过 `cancelPrevious: false` 关闭
+
+---
+
+## 🔗 相关资源
+
+- [📖 官方文档](https://1079161148.github.io/yh-ui/)
+- [📦 GitHub 仓库](https://github.com/1079161148/yh-ui)
+
+## 📄 开源协议
+
+MIT License © 2024-present YH-UI Team

package/dist/adapters/fetch.cjs

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.XHRAdapter = exports.FetchAdapter = void 0;
+exports.getDefaultAdapter = getDefaultAdapter;
+class FetchAdapter {
+  name = "fetch";
+  isSupported() {
+    return typeof fetch !== "undefined";
+  }
+  async request(config) {
+    const {
+      fullPath,
+      method = "GET",
+      headers = {},
+      data,
+      signal,
+      credentials,
+      responseType
+    } = config;
+    const fetchOptions = {
+      method,
+      headers,
+      credentials,
+      signal
+    };
+    if (data !== void 0 && method !== "GET") {
+      if (data instanceof FormData) {
+        fetchOptions.body = data;
+      } else if (data instanceof URLSearchParams) {
+        fetchOptions.body = data;
+      } else {
+        fetchOptions.body = JSON.stringify(data);
+        if (!headers["Content-Type"]) {
+          headers["Content-Type"] = "application/json";
+        }
+      }
+    }
+    const response = await fetch(fullPath, fetchOptions);
+    let responseData;
+    switch (responseType) {
+      case "text":
+        responseData = await response.text();
+        break;
+      case "blob":
+        responseData = await response.blob();
+        break;
+      case "arraybuffer":
+        responseData = await response.arrayBuffer();
+        break;
+      case "formdata":
+        responseData = await response.formData();
+        break;
+      case "json":
+      default:
+        const text = await response.text();
+        responseData = text ? JSON.parse(text) : null;
+    }
+    return {
+      data: responseData,
+      response,
+      config,
+      requestId: config.requestId
+    };
+  }
+}
+exports.FetchAdapter = FetchAdapter;
+class XHRAdapter {
+  name = "xhr";
+  isSupported() {
+    return typeof XMLHttpRequest !== "undefined";
+  }
+  async request(config) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      const {
+        fullPath,
+        method = "GET",
+        headers = {},
+        data,
+        timeout,
+        credentials,
+        responseType
+      } = config;
+      xhr.open(method, fullPath, true);
+      xhr.responseType = responseType;
+      Object.entries(headers).forEach(([key, value]) => {
+        xhr.setRequestHeader(key, value);
+      });
+      if (credentials) {
+        xhr.withCredentials = credentials === "include";
+      }
+      if (timeout) {
+        xhr.timeout = timeout;
+      }
+      xhr.ontimeout = () => {
+        reject(new Error("Request timeout"));
+      };
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          let responseData;
+          if (responseType === "text") {
+            responseData = xhr.responseText;
+          } else if (responseType === "blob") {
+            responseData = xhr.response;
+          } else if (responseType === "arraybuffer") {
+            responseData = xhr.response;
+          } else {
+            try {
+              responseData = xhr.responseText ? JSON.parse(xhr.responseText) : null;
+            } catch {
+              responseData = xhr.responseText;
+            }
+          }
+          resolve({
+            data: responseData,
+            response: xhr,
+            config,
+            requestId: config.requestId
+          });
+        } else {
+          reject(new Error(`Request failed with status ${xhr.status}`));
+        }
+      };
+      xhr.onerror = () => {
+        reject(new Error("Network error"));
+      };
+      if (data) {
+        if (data instanceof FormData) {
+          xhr.send(data);
+        } else {
+          xhr.setRequestHeader("Content-Type", "application/json");
+          xhr.send(JSON.stringify(data));
+        }
+      } else {
+        xhr.send();
+      }
+      if (config.signal) {
+        config.signal.addEventListener("abort", () => {
+          xhr.abort();
+        });
+      }
+    });
+  }
+}
+exports.XHRAdapter = XHRAdapter;
+function getDefaultAdapter() {
+  if (typeof fetch !== "undefined") {
+    return new FetchAdapter();
+  }
+  if (typeof XMLHttpRequest !== "undefined") {
+    return new XHRAdapter();
+  }
+  throw new Error("No HTTP adapter available");
+}

package/dist/adapters/fetch.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 适配器接口定义
+ * 适配器架构允许切换不同的 HTTP 实现
+ */
+import type { InternalRequestOptions, RequestResponse, HttpAdapter } from '../types';
+/**
+ * Fetch 适配器 - 浏览器/Node 18+ 环境
+ */
+export declare class FetchAdapter implements HttpAdapter {
+    name: string;
+    isSupported(): boolean;
+    request<T>(config: InternalRequestOptions): Promise<RequestResponse<T>>;
+}
+/**
+ * XHR 适配器 - 传统浏览器
+ */
+export declare class XHRAdapter implements HttpAdapter {
+    name: string;
+    isSupported(): boolean;
+    request<T>(config: InternalRequestOptions): Promise<RequestResponse<T>>;
+}
+/**
+ * 获取默认适配器
+ */
+export declare function getDefaultAdapter(): HttpAdapter;

package/dist/adapters/fetch.mjs

@@ -0,0 +1,148 @@
+export class FetchAdapter {
+  name = "fetch";
+  isSupported() {
+    return typeof fetch !== "undefined";
+  }
+  async request(config) {
+    const {
+      fullPath,
+      method = "GET",
+      headers = {},
+      data,
+      signal,
+      credentials,
+      responseType
+    } = config;
+    const fetchOptions = {
+      method,
+      headers,
+      credentials,
+      signal
+    };
+    if (data !== void 0 && method !== "GET") {
+      if (data instanceof FormData) {
+        fetchOptions.body = data;
+      } else if (data instanceof URLSearchParams) {
+        fetchOptions.body = data;
+      } else {
+        fetchOptions.body = JSON.stringify(data);
+        if (!headers["Content-Type"]) {
+          headers["Content-Type"] = "application/json";
+        }
+      }
+    }
+    const response = await fetch(fullPath, fetchOptions);
+    let responseData;
+    switch (responseType) {
+      case "text":
+        responseData = await response.text();
+        break;
+      case "blob":
+        responseData = await response.blob();
+        break;
+      case "arraybuffer":
+        responseData = await response.arrayBuffer();
+        break;
+      case "formdata":
+        responseData = await response.formData();
+        break;
+      case "json":
+      default:
+        const text = await response.text();
+        responseData = text ? JSON.parse(text) : null;
+    }
+    return {
+      data: responseData,
+      response,
+      config,
+      requestId: config.requestId
+    };
+  }
+}
+export class XHRAdapter {
+  name = "xhr";
+  isSupported() {
+    return typeof XMLHttpRequest !== "undefined";
+  }
+  async request(config) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      const {
+        fullPath,
+        method = "GET",
+        headers = {},
+        data,
+        timeout,
+        credentials,
+        responseType
+      } = config;
+      xhr.open(method, fullPath, true);
+      xhr.responseType = responseType;
+      Object.entries(headers).forEach(([key, value]) => {
+        xhr.setRequestHeader(key, value);
+      });
+      if (credentials) {
+        xhr.withCredentials = credentials === "include";
+      }
+      if (timeout) {
+        xhr.timeout = timeout;
+      }
+      xhr.ontimeout = () => {
+        reject(new Error("Request timeout"));
+      };
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          let responseData;
+          if (responseType === "text") {
+            responseData = xhr.responseText;
+          } else if (responseType === "blob") {
+            responseData = xhr.response;
+          } else if (responseType === "arraybuffer") {
+            responseData = xhr.response;
+          } else {
+            try {
+              responseData = xhr.responseText ? JSON.parse(xhr.responseText) : null;
+            } catch {
+              responseData = xhr.responseText;
+            }
+          }
+          resolve({
+            data: responseData,
+            response: xhr,
+            config,
+            requestId: config.requestId
+          });
+        } else {
+          reject(new Error(`Request failed with status ${xhr.status}`));
+        }
+      };
+      xhr.onerror = () => {
+        reject(new Error("Network error"));
+      };
+      if (data) {
+        if (data instanceof FormData) {
+          xhr.send(data);
+        } else {
+          xhr.setRequestHeader("Content-Type", "application/json");
+          xhr.send(JSON.stringify(data));
+        }
+      } else {
+        xhr.send();
+      }
+      if (config.signal) {
+        config.signal.addEventListener("abort", () => {
+          xhr.abort();
+        });
+      }
+    });
+  }
+}
+export function getDefaultAdapter() {
+  if (typeof fetch !== "undefined") {
+    return new FetchAdapter();
+  }
+  if (typeof XMLHttpRequest !== "undefined") {
+    return new XHRAdapter();
+  }
+  throw new Error("No HTTP adapter available");
+}

package/dist/adapters/index.cjs

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _fetch = require("./fetch.cjs");
+Object.keys(_fetch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _fetch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _fetch[key];
+    }
+  });
+});
+var _platform = require("./platform.cjs");
+Object.keys(_platform).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _platform[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _platform[key];
+    }
+  });
+});

package/dist/adapters/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 适配器导出
+ */
+export * from './fetch';
+export * from './platform';

package/dist/adapters/index.mjs

@@ -0,0 +1,2 @@
+export * from "./fetch.mjs";
+export * from "./platform.mjs";