@deppon/deppon-request 1.0.5 → 1.2.0

package/README.md

@@ -1,3 +1,222 @@
-# `cbk/request`
+# `@deppon/deppon-request`
 
 德邦前端 http 请求包
+
+## 安装
+
+```bash
+npm install @deppon/deppon-request
+```
+
+## 基础使用
+
+### JavaScript/TypeScript 项目
+
+```javascript
+import request from '@deppon/deppon-request';
+
+// 发送 GET 请求
+request({
+    url: '/api/data',
+    method: 'get',
+    params: {
+        id: 1,
+    },
+})
+    .then(res => {
+        console.log(res);
+    })
+    .catch(err => {
+        console.error(err);
+    });
+
+// 发送 POST 请求
+request({
+    url: '/api/data',
+    method: 'post',
+    data: {
+        name: 'test',
+    },
+})
+    .then(res => {
+        console.log(res);
+    })
+    .catch(err => {
+        console.error(err);
+    });
+```
+
+## Vue 3 使用
+
+### 1. 安装插件
+
+在 Vue 应用中安装插件：
+
+```javascript
+import { createApp } from 'vue';
+import { VuePlugin } from '@deppon/deppon-request';
+
+const app = createApp(App);
+
+// 安装插件
+app.use(VuePlugin);
+
+app.mount('#app');
+```
+
+### 2. 在 Composition API 中使用
+
+```vue
+<script setup>
+import { useRequest } from '@deppon/deppon-request';
+import { ref } from 'vue';
+
+const request = useRequest();
+const data = ref(null);
+const loading = ref(false);
+
+const fetchData = async () => {
+    loading.value = true;
+    try {
+        const res = await request({
+            url: '/api/data',
+            method: 'get',
+            params: {
+                id: 1,
+            },
+        });
+        data.value = res;
+    } catch (error) {
+        console.error(error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const submitData = async () => {
+    try {
+        const res = await request({
+            url: '/api/submit',
+            method: 'post',
+            data: {
+                name: 'test',
+            },
+        });
+        console.log(res);
+    } catch (error) {
+        console.error(error);
+    }
+};
+</script>
+
+<template>
+    <div>
+        <button @click="fetchData" :disabled="loading">
+            {{ loading ? '加载中...' : '获取数据' }}
+        </button>
+        <button @click="submitData">提交数据</button>
+    </div>
+</template>
+```
+
+### 3. 在 Options API 中使用
+
+```vue
+<script>
+export default {
+    data() {
+        return {
+            loading: false,
+            data: null,
+        };
+    },
+    methods: {
+        async fetchData() {
+            this.loading = true;
+            try {
+                // 通过 this.$request 访问
+                const res = await this.$request({
+                    url: '/api/data',
+                    method: 'get',
+                    params: {
+                        id: 1,
+                    },
+                });
+                this.data = res;
+            } catch (error) {
+                console.error(error);
+            } finally {
+                this.loading = false;
+            }
+        },
+        async submitData() {
+            try {
+                const res = await this.$request({
+                    url: '/api/submit',
+                    method: 'post',
+                    data: {
+                        name: 'test',
+                    },
+                });
+                console.log(res);
+            } catch (error) {
+                console.error(error);
+            }
+        },
+    },
+};
+</script>
+```
+
+## API
+
+### Composition API
+
+-   `useRequest()` - 获取 request 实例
+
+### 请求方法
+
+-   `request(options)` - 发送 HTTP 请求
+
+#### 请求参数
+
+-   `url` - 请求的地址（必填）
+-   `method` - 请求方法，默认为 `'get'`
+-   `data` - POST 请求的数据
+-   `params` - GET 请求的查询参数
+-   `headers` - 自定义请求头
+-   `once` - 控制接口只执行一次（可选）
+
+#### 使用示例
+
+```javascript
+// GET 请求
+request({
+    url: '/api/users',
+    method: 'get',
+    params: {
+        page: 1,
+        size: 10,
+    },
+});
+
+// POST 请求
+request({
+    url: '/api/users',
+    method: 'post',
+    data: {
+        name: 'John',
+        age: 30,
+    },
+});
+
+// 只执行一次的请求
+request({
+    url: '/api/submit',
+    method: 'post',
+    data: { name: 'test' },
+    once: true,
+});
+```
+
+更多 API 请参考源码。

package/es/composable.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Composition API: useRequest
+ * 在 Vue 3 Composition API 中使用 request
+ *
+ * @example
+ * import { useRequest } from '@deppon/deppon-request/vue'
+ *
+ * export default {
+ *     setup() {
+ *         const request = useRequest()
+ *
+ *         const fetchData = async () => {
+ *             try {
+ *                 const res = await request({
+ *                     url: '/api/data',
+ *                     method: 'get'
+ *                 })
+ *                 console.log(res)
+ *             } catch (error) {
+ *                 console.error(error)
+ *             }
+ *         }
+ *
+ *         return { fetchData }
+ *     }
+ * }
+ */
+export function useRequest(): any;

package/es/composable.js

@@ -0,0 +1,51 @@
+import './_virtual/_rollup-plugin-inject-process-env.js';
+import { inject, getCurrentInstance } from 'vue';
+import CBKRquest from './request/request.js';
+
+/**
+ * Composition API: useRequest
+ * 在 Vue 3 Composition API 中使用 request
+ *
+ * @example
+ * import { useRequest } from '@deppon/deppon-request/vue'
+ *
+ * export default {
+ *     setup() {
+ *         const request = useRequest()
+ *
+ *         const fetchData = async () => {
+ *             try {
+ *                 const res = await request({
+ *                     url: '/api/data',
+ *                     method: 'get'
+ *                 })
+ *                 console.log(res)
+ *             } catch (error) {
+ *                 console.error(error)
+ *             }
+ *         }
+ *
+ *         return { fetchData }
+ *     }
+ * }
+ */
+function useRequest() {
+  // 优先从 provide 获取
+  var requestFromProvide = inject('depponRequest', null);
+
+  // 如果 provide 中没有，尝试从实例获取
+  if (!requestFromProvide) {
+    var instance = getCurrentInstance();
+    if (instance) {
+      return instance.appContext.config.globalProperties.$request;
+    }
+  }
+
+  // 如果都没有，返回默认实例并提示
+  if (!requestFromProvide) {
+    return CBKRquest;
+  }
+  return requestFromProvide;
+}
+
+export { useRequest };

package/es/index.d.ts

@@ -1,2 +1,4 @@
 export default request;
+export { default as VuePlugin } from "./vue";
+export { useRequest } from "./composable";
 import request from "./request";

package/es/index.js

@@ -1,3 +1,5 @@
 import './_virtual/_rollup-plugin-inject-process-env.js';
 import CBKRquest from './request/request.js';
 export { default } from './request/request.js';
+export { default as VuePlugin } from './vue.js';
+export { useRequest } from './composable.js';

package/es/request/instance.d.ts

@@ -1 +1 @@
-export default function appInstance(options: any): import("axios").AxiosPromise<any>;
+export default function appInstance(options: any): Promise<import("axios").AxiosResponse<any, any, {}>>;

package/es/request/request.js

@@ -8,7 +8,7 @@ import cancelApi from './cancel.js';
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * cbk-request说明
+ * deppon-request说明
  * @params options.url 请求的地址
  * @params options.data 请求数据
  * @params options.async 是否同步(废弃)

package/es/vue.d.ts

@@ -0,0 +1,10 @@
+declare namespace _default {
+    export { install };
+}
+export default _default;
+export { useRequest } from "./composable";
+/**
+ * Vue 插件安装函数
+ * @param {Object} app - Vue 应用实例
+ */
+declare function install(app: Object): void;

package/es/vue.js

@@ -0,0 +1,19 @@
+import './_virtual/_rollup-plugin-inject-process-env.js';
+import CBKRquest from './request/request.js';
+
+/**
+ * Vue 插件安装函数
+ * @param {Object} app - Vue 应用实例
+ */
+function install(app) {
+  // 注册全局属性
+  app.config.globalProperties.$request = CBKRquest;
+
+  // 提供实例，供 Composition API 使用
+  app.provide('depponRequest', CBKRquest);
+}
+var vue = {
+  install: install
+};
+
+export { vue as default };

package/package.json

@@ -1,12 +1,15 @@
 {
     "name": "@deppon/deppon-request",
-    "version": "1.0.5",
+    "version": "1.2.0",
     "description": "德邦前端 http 请求包",
     "license": "MIT",
     "homepage": "",
     "keywords": [
         "request",
-        "react-library"
+        "react-library",
+        "vue",
+        "vue3",
+        "vue-plugin"
     ],
     "author": {
         "name": "",
@@ -32,12 +35,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.17.7",
-        "@deppon/deppon-bridge": "1.0.5",
-        "@deppon/deppon-ui": "1.0.5",
-        "@deppon/deppon-utils": "1.0.5",
+        "@deppon/deppon-bridge": "1.1.2",
+        "@deppon/deppon-ui": "1.2.0",
+        "@deppon/deppon-utils": "1.2.0",
         "axios": "^0.26.0",
         "md5": "^2.3.0",
         "qs": "^6.10.3"
     },
-    "gitHead": "fb69e22fad2ec46e39905bebc7eceac1d4b4fb91"
+    "peerDependencies": {
+        "vue": "^3.0.0"
+    },
+    "gitHead": "a8c002bc49a329259c1f5522313c9370de74dcbe"
 }