uview-pro 0.0.18 → 0.0.20

package/libs/request/index.ts

@@ -1,21 +1,25 @@
 import deepMerge from '../function/deepMerge';
-import validate from '../function/test';
+
+/**
+ * 请求配置项Meta类型定义
+ */
+export interface RequestMeta {
+    toast?: boolean;
+    loading?: boolean;
+    originalData?: boolean;
+    [key: string]: any;
+}
 
 /**
  * 请求配置项类型定义
  */
 export interface RequestConfig {
-    baseUrl: string;
-    header: Record<string, any>;
-    method: string;
-    dataType: string;
-    responseType: string;
-    showLoading: boolean;
-    loadingText: string;
-    loadingTime: number;
-    timer: ReturnType<typeof setTimeout> | null;
-    originalData: boolean;
-    loadingMask: boolean;
+    baseUrl?: string;
+    header?: Record<string, any>;
+    method?: string;
+    dataType?: string;
+    responseType?: string;
+    meta?: RequestMeta;
 }
 
 /**
@@ -29,7 +33,7 @@ export interface RequestInterceptor {
 /**
  * 请求参数类型定义
  */
-interface RequestOptions {
+export interface RequestOptions {
     url: string;
     header?: Record<string, any>;
     method?: 'GET' | 'POST' | 'OPTIONS' | 'HEAD' | 'PUT' | 'DELETE' | 'TRACE' | 'CONNECT';
@@ -38,14 +42,32 @@ interface RequestOptions {
     responseType?: string;
     params?: Record<string, any>;
     complete?: (response: any) => void;
+    meta?: RequestMeta;
 }
-export type { RequestOptions };
 
-class Request {
-    config: RequestConfig;
-    interceptor: RequestInterceptor;
-    options?: RequestOptions;
+export class Request {
+    public config: RequestConfig;
+    public interceptor: RequestInterceptor;
+    public options?: RequestOptions;
 
+    constructor() {
+        this.config = {
+            baseUrl: '', // 请求的根域名
+            header: {}, // 默认的请求头
+            method: 'POST', // 请求方式
+            dataType: 'json', // 设置为json，返回后uni.request会对数据进行一次JSON.parse
+            responseType: 'text', // 此参数无需处理，因为5+和支付宝小程序不支持，默认为text即可
+            meta: {
+                originalData: true, // 是否在拦截器中返回服务端的原始数据，见文档说明
+                toast: false, // 是否在请求出错时，弹出toast
+                loading: false // 是否显示加载中
+            }
+        };
+        this.interceptor = {
+            request: null,
+            response: null
+        };
+    }
     /**
      * 设置全局默认配置
      * @param customConfig 自定义配置
@@ -58,10 +80,17 @@ class Request {
      * 主要请求部分
      * @param options 请求参数
      */
-    request(options: RequestOptions): Promise<any> {
-        // 检查请求拦截
+    request<T = unknown>(options: RequestOptions): Promise<T> {
+        // 合并 meta 配置，优先级：单次请求 > 全局
+        const mergedMeta: RequestMeta = {
+            ...this.config.meta,
+            ...(options.meta || {})
+        };
+        // 让 options.meta 传递到拦截器
+        options.meta = mergedMeta;
+
         if (this.interceptor.request && typeof this.interceptor.request === 'function') {
-            let interceptorRequest = this.interceptor.request(options);
+            const interceptorRequest = this.interceptor.request(options);
             if (interceptorRequest === false) {
                 // 返回一个处于pending状态中的Promise，来取消原promise，避免进入then()回调
                 return new Promise(() => {});
@@ -77,19 +106,18 @@ class Request {
         // 保证 url 一定为 string
         if (!options.url) options.url = '';
 
-        return new Promise<any>((resolve, reject) => {
+        return new Promise<T>((resolve, reject) => {
             options.complete = (response: any) => {
-                // 请求返回后，隐藏loading(如果请求返回快的话，可能会没有loading)
-                uni.hideLoading();
-                // 清除定时器，如果请求回来了，就无需loading
-                clearTimeout(this.config.timer as ReturnType<typeof setTimeout>);
-                this.config.timer = null;
-                // 判断用户对拦截返回数据的要求，如果originalData为true，返回所有的数据(response)到拦截器，否则只返回response.data
-                if (this.config.originalData) {
+                // 读取 meta 配置
+                const meta = options.meta || this.config.meta || {};
+                const originalData = meta.originalData ?? false;
+                // 拦截器处理，加入request的配置参数
+                response.config = options;
+                if (originalData) {
                     // 判断是否存在拦截器
                     if (this.interceptor.response && typeof this.interceptor.response === 'function') {
-                        let resInterceptors = this.interceptor.response(response);
-                        // 如果拦截器不返回false，就将拦截器返回的内容给this.$u.post的then回调
+                        const resInterceptors = this.interceptor.response(response);
+                        // 如果拦截器不返回false，就将拦截器返回的内容给请求的then回调
                         if (resInterceptors !== false) {
                             resolve(resInterceptors);
                         } else {
@@ -97,13 +125,13 @@ class Request {
                             reject(response);
                         }
                     } else {
-                        // 如果要求返回原始数据，就算没有拎截器，也返回最原始的数据
+                        // 如果要求返回原始数据，就算没有拦截器，也返回最原始的数据
                         resolve(response);
                     }
                 } else {
-                    if (response.statusCode == 200) {
+                    if (response.statusCode === 200) {
                         if (this.interceptor.response && typeof this.interceptor.response === 'function') {
-                            let resInterceptors = this.interceptor.response(response.data);
+                            const resInterceptors = this.interceptor.response(response.data);
                             if (resInterceptors !== false) {
                                 resolve(resInterceptors);
                             } else {
@@ -114,124 +142,82 @@ class Request {
                             resolve(response.data);
                         }
                     } else {
-                        // 不返回原始数据的情况下，服务器状态码不为200，modal弹框提示
-                        // if(response.errMsg) {
-                        //  uni.showModal({
-                        //    title: response.errMsg
-                        //  });
-                        // }
                         reject(response);
                     }
                 }
             };
-
-            // 判断用户传递的URL是否/开头,如果不是,加上/，这里使用了uView的test.js验证库的url()方法
-            options.url = validate.url(options.url) ? options.url : this.config.baseUrl + (options.url.indexOf('/') == 0 ? options.url : '/' + options.url);
-
-            // 是否显示loading
-            // 加一个是否已有timer定时器的判断，否则有两个同时请求的时候，后者会清除前者的定时器id
-            // 而没有清除前者的定时器，导致前者超时，一直显示loading
-            if (this.config.showLoading && !this.config.timer) {
-                this.config.timer = setTimeout(() => {
-                    uni.showLoading({
-                        title: this.config.loadingText,
-                        mask: this.config.loadingMask
-                    });
-                    this.config.timer = null;
-                }, this.config.loadingTime);
-            }
+            // 判断用户传递的URL是否http开头
+            options.url = options.url && options.url.indexOf('http') !== 0 ? this.config.baseUrl + (options.url.indexOf('/') === 0 ? options.url : `/${options.url}`) : options.url;
             uni.request(options);
         });
-        // .catch(res => {
-        //   // 如果返回reject()，不让其进入this.$u.post().then().catch()后面的catct()
-        //   // 因为很多人都会忘了写后面的catch()，导致报错捕获不到catch
-        //   return new Promise(()=>{});
-        // })
     }
 
-    constructor() {
-        this.config = {
-            baseUrl: '', // 请求的根域名
-            // 默认的请求头
-            header: {},
+    get<T = unknown>(url: string, data: any = {}, options: { header?: Record<string, any>; meta?: RequestMeta } = {}): Promise<T> {
+        return this.request<T>({
+            method: 'GET',
+            url,
+            data,
+            header: options.header,
+            meta: options.meta
+        });
+    }
+
+    post<T = unknown>(url: string, data: any = {}, options: { header?: Record<string, any>; meta?: RequestMeta } = {}): Promise<T> {
+        return this.request<T>({
+            url,
             method: 'POST',
-            // 设置为json，返回后uni.request会对数据进行一次JSON.parse
-            dataType: 'json',
-            // 此参数无需处理，因为5+和支付宝小程序不支持，默认为text即可
-            responseType: 'text',
-            showLoading: true, // 是否显示请求中的loading
-            loadingText: '请求中...',
-            loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
-            timer: null, // 定时器
-            originalData: false, // 是否在拦截器中返回服务端的原始数据，见文档说明
-            loadingMask: true // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
-        };
+            data,
+            header: options.header,
+            meta: options.meta
+        });
+    }
 
-        // 拦截器
-        this.interceptor = {
-            // 请求前的拦截
-            request: null,
-            // 请求后的拦截
-            response: null
-        };
+    put<T = unknown>(url: string, data: any = {}, options: { header?: Record<string, any>; meta?: RequestMeta } = {}): Promise<T> {
+        return this.request<T>({
+            url,
+            method: 'PUT',
+            data,
+            header: options.header,
+            meta: options.meta
+        });
+    }
 
-        // get请求
-        this.get = (url: string, data: any = {}, header: Record<string, any> = {}): Promise<any> => {
-            return this.request({
-                method: 'GET',
-                url,
-                header,
-                data
-            });
-        };
+    delete<T = unknown>(url: string, data: any = {}, options: { header?: Record<string, any>; meta?: RequestMeta } = {}): Promise<T> {
+        return this.request<T>({
+            url,
+            method: 'DELETE',
+            data,
+            header: options.header,
+            meta: options.meta
+        });
+    }
+}
 
-        // post请求
-        this.post = (url: string, data: any = {}, header: Record<string, any> = {}): Promise<any> => {
-            return this.request({
-                url,
-                method: 'POST',
-                header,
-                data
-            });
-        };
+// 插件化导出，支持 app.use(http, { interceptor })
+const httpInstance = new Request();
 
-        // put请求，不支持支付宝小程序(HX2.6.15)
-        this.put = (url: string, data: any = {}, header: Record<string, any> = {}): Promise<any> => {
-            return this.request({
-                url,
-                method: 'PUT',
-                header,
-                data
-            });
-        };
+interface HttpPluginOptions {
+    requestConfig?: Partial<RequestConfig>;
+    interceptor?: RequestInterceptor;
+}
 
-        // delete请求，不支持支付宝和头条小程序(HX2.6.15)
-        this.delete = (url: string, data: any = {}, header: Record<string, any> = {}): Promise<any> => {
-            return this.request({
-                url,
-                method: 'DELETE',
-                header,
-                data
-            });
-        };
+// 全局导出，支持 import { httpPlugin } from 'uview-pro'
+const httpPlugin = {
+    install(app: any, options: HttpPluginOptions = {}) {
+        if (options.interceptor) {
+            const { request, response } = options.interceptor;
+            if (request) httpInstance.interceptor.request = request;
+            if (response) httpInstance.interceptor.response = response;
+        }
+        if (options.requestConfig) {
+            httpInstance.setConfig(options.requestConfig);
+        }
+        app.config.globalProperties.$http = httpInstance;
     }
+};
 
-    /**
-     * GET 请求
-     */
-    get: (url: string, data?: any, header?: Record<string, any>) => Promise<any>;
-    /**
-     * POST 请求
-     */
-    post: (url: string, data?: any, header?: Record<string, any>) => Promise<any>;
-    /**
-     * PUT 请求
-     */
-    put: (url: string, data?: any, header?: Record<string, any>) => Promise<any>;
-    /**
-     * DELETE 请求
-     */
-    delete: (url: string, data?: any, header?: Record<string, any>) => Promise<any>;
-}
+// 全局导出，支持 import { http } from 'uview-pro'
+export { httpInstance as http };
 
-export default new Request();
+// 插件化导出，支持 app.use(http, { interceptor })
+export default httpPlugin;

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的70+精选UI组件库",
-    "version": "0.0.18",
+    "version": "0.0.20",
     "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",

package/readme.md

@@ -25,12 +25,12 @@
 
 ## 特性
 
--   兼容安卓，iOS，微信小程序，H5，QQ 小程序，百度小程序，支付宝小程序，头条小程序
--   70+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
--   众多贴心的 JS 利器，让您飞镖在手，召之即来，百步穿杨
--   众多的常用页面和布局，让您专注逻辑，事半功倍
--   详尽的文档支持，现代化的演示效果
--   按需引入，精简打包体积
+- 兼容安卓，iOS，微信小程序，H5，QQ 小程序，百度小程序，支付宝小程序，头条小程序
+- 70+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
+- 众多贴心的 JS 利器，让您飞镖在手，召之即来，百步穿杨
+- 众多的常用页面和布局，让您专注逻辑，事半功倍
+- 详尽的文档支持，现代化的演示效果
+- 按需引入，精简打包体积
 
 ## 手机预览
 
@@ -58,10 +58,10 @@ pnpm dev
 
 ## 链接
 
--   [Github](https://github.com/anyup/uview-pro)
--   [Gitee](https://gitee.com/anyup/uview-pro)
--   [官方文档](https://uview-pro.netlify.app/)
--   [更新日志](https://github.com/anyup/uView-Pro/blob/master/src/uni_modules/uview-pro/changelog.md)
+- [Github](https://github.com/anyup/uview-pro)
+- [Gitee](https://gitee.com/anyup/uview-pro)
+- [官方文档](https://uview-pro.netlify.app/)
+- [更新日志](https://github.com/anyup/uView-Pro/blob/master/src/uni_modules/uview-pro/changelog.md)
 
 ## 交流反馈
 
@@ -69,7 +69,7 @@ pnpm dev
 
 <table class="table">
     <tr>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat-2.png?updatedAt=1756355426929" width="250" height="345" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat.png?updatedAt=1757299344899" width="250" height="345" ></td>
         <td><img src="https://ik.imagekit.io/anyup/images/social/qq-chat.png" width="250" height="345" ></td>
     </tr>
     <tr>
@@ -90,7 +90,7 @@ pnpm dev
 
 ### 1. 安装 uView Pro
 
--   npm 安装：
+- npm 安装：
 
 ```bash
 npm install uview-pro
@@ -100,7 +100,7 @@ yarn add uview-pro
 pnpm add uview-pro
 ```
 
--   uni_modules 安装：
+- uni_modules 安装：
 
 通过 HBuilderX 插件市场或手动下载，将 uView Pro 放入 `uni_modules` 目录。
 
@@ -169,9 +169,9 @@ export function createApp() {
 
 **温馨提示**
 
--   1.修改 `easycom` 规则后需重启 HX 或重新编译项目。
--   2.请确保 `pages.json` 中只有一个 easycom 字段，否则请自行合并多个规则。
--   3.一定要放在 `custom` 内，否则无效。
+- 1.修改 `easycom` 规则后需重启 HX 或重新编译项目。
+- 2.请确保 `pages.json` 中只有一个 easycom 字段，否则请自行合并多个规则。
+- 3.一定要放在 `custom` 内，否则无效。
 
 ### 5. Volar 类型提示支持
 
@@ -225,7 +225,7 @@ export function createApp() {
 
 再次感谢 `uView UI` 开发团队，以及所有为 `uView UI` 的贡献者，以及所有为 `uView Pro` 的贡献者。
 
--   [Github](https://github.com/anyup/uview-pro)
--   [Gitee](https://gitee.com/anyup/uview-pro)
--   [uView UI 1.0](https://github.com/umicro/uView)
--   [uView UI 2.0](https://github.com/umicro/uView2.0)
+- [Github](https://github.com/anyup/uview-pro)
+- [Gitee](https://gitee.com/anyup/uview-pro)
+- [uView UI 1.0](https://github.com/umicro/uView)
+- [uView UI 2.0](https://github.com/umicro/uView2.0)

package/libs/request/uni-http.md

@@ -1,156 +0,0 @@
-# uni-http 使用说明（useHttp hooks 版）
-
-> 本文档适用于 uView Pro 3.x 及以上版本，推荐使用 hooks 方式引入 Http 请求库。
-
-## 目录
-- [简介](#简介)
-- [快速开始](#快速开始)
-- [类型定义](#类型定义)
-- [拦截器用法](#拦截器用法)
-- [常见用例](#常见用例)
-- [常见问题](#常见问题)
-- [类型提示与 TS 支持](#类型提示与 TS 支持)
-- [FAQ](#faq)
-
----
-
-## 简介
-
-`uni-http` 是基于 Promise 封装的 uni-app HTTP 请求库，支持全局配置、请求/响应拦截、类型安全、hooks 化调用，适配多端。推荐通过 `useHttp` hooks 工厂函数创建实例，支持全局单例和按需实例化。
-
-## 快速开始
-
-### 1. 引入 useHttp
-```ts
-import useHttp from '@/uni_modules/uview-pro/libs/request/uni-http';
-```
-
-### 2. 创建 http 实例
-```ts
-const http = useHttp({
-  baseURL: 'https://api.example.com',
-  timeout: 10000,
-  header: { 'Content-Type': 'application/json' }
-});
-```
-
-### 3. 发起请求
-```ts
-// GET
-http.get('/user/info', { params: { id: 1 } })
-  .then(res => { /* ... */ })
-  .catch(err => { /* ... */ });
-
-// POST
-http.post('/user/update', { name: '张三' })
-  .then(res => { /* ... */ });
-```
-
-## 类型定义
-
-```ts
-interface HttpRequestConfig {
-  baseURL?: string;
-  timeout?: number;
-  header?: Record<string, any>;
-  [key: string]: any;
-}
-
-interface HttpResponse<T = any> {
-  code: number;
-  data: T;
-  msg: string;
-  [key: string]: any;
-}
-
-interface Http {
-  get<T = any>(url: string, config?: HttpRequestConfig): Promise<HttpResponse<T>>;
-  post<T = any>(url: string, data?: any, config?: HttpRequestConfig): Promise<HttpResponse<T>>;
-  put<T = any>(url: string, data?: any, config?: HttpRequestConfig): Promise<HttpResponse<T>>;
-  delete<T = any>(url: string, config?: HttpRequestConfig): Promise<HttpResponse<T>>;
-  // ... 其他方法
-  setRequestInterceptor(fn: (config: HttpRequestConfig) => HttpRequestConfig | Promise<HttpRequestConfig>): void;
-  setResponseInterceptor(fn: (response: HttpResponse) => HttpResponse | Promise<HttpResponse>): void;
-}
-```
-
-## 拦截器用法
-
-### 请求拦截器
-```ts
-http.setRequestInterceptor(config => {
-  // 可统一添加 token、日志等
-  config.header = config.header || {};
-  config.header.Authorization = 'Bearer ' + uni.getStorageSync('token');
-  return config;
-});
-```
-
-### 响应拦截器
-```ts
-http.setResponseInterceptor(response => {
-  if (response.code !== 0) {
-    uni.showToast({ title: response.msg || '请求失败', icon: 'none' });
-  }
-  return response;
-});
-```
-
-## 常见用例
-
-### 1. 全局单例
-```ts
-// src/common/http.ts
-import useHttp from '@/uni_modules/uview-pro/libs/request/uni-http';
-const http = useHttp({ baseURL: 'https://api.example.com' });
-export default http;
-```
-
-### 2. 组件内按需实例化
-```ts
-import useHttp from '@/uni_modules/uview-pro/libs/request/uni-http';
-const http = useHttp();
-```
-
-### 3. 类型推断
-```ts
-interface UserInfo { id: number; name: string; }
-const res = await http.get<UserInfo>('/user/info');
-console.log(res.data.id);
-```
-
-### 4. 错误处理
-```ts
-http.get('/error/api').catch(err => {
-  uni.showToast({ title: err.message, icon: 'none' });
-});
-```
-
-## 常见问题
-
-- **Q: 如何全局配置 baseURL、header？**
-  A: 在 useHttp({ baseURL, header }) 传入即可。
-- **Q: 如何自定义拦截器？**
-  A: 通过 setRequestInterceptor/setResponseInterceptor。
-- **Q: 支持多实例吗？**
-  A: 支持，useHttp 可多次调用。
-- **Q: 支持类型推断吗？**
-  A: 支持，泛型参数自动推断返回数据类型。
-
-## 类型提示与 TS 支持
-
-- 完全 TypeScript 支持，类型自动推断。
-- 推荐在 `tsconfig.json` 中包含 `uni-http.ts` 路径。
-
-## FAQ
-
-- **Q: 还能用 new Http() 吗？**
-  A: 不推荐，已废弃。请统一使用 useHttp。
-- **Q: 如何清理拦截器？**
-  A: 暂不支持移除，建议重新实例化。
-- **Q: 支持 uni.uploadFile、downloadFile 吗？**
-  A: 暂未内置，可自行扩展。
-
----
-
-如有更多问题，欢迎提 Issue 或 PR。