@cloudcome/utils-vue 1.13.2 → 1.14.0
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/README.md +72 -73
- package/dist/async.cjs +65 -65
- package/dist/async.cjs.map +1 -1
- package/dist/async.mjs +66 -67
- package/dist/async.mjs.map +1 -1
- package/dist/component/self.d.ts +4 -4
- package/dist/component.cjs +110 -13
- package/dist/component.cjs.map +1 -1
- package/dist/component.d.ts +1 -1
- package/dist/component.mjs +108 -17
- package/dist/component.mjs.map +1 -1
- package/dist/event.cjs +39 -32
- package/dist/event.cjs.map +1 -1
- package/dist/event.mjs +39 -33
- package/dist/event.mjs.map +1 -1
- package/dist/index.cjs +8 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +9 -5
- package/dist/index.mjs.map +1 -1
- package/dist/request.cjs +72 -74
- package/dist/request.cjs.map +1 -1
- package/dist/request.d.ts +1 -1
- package/dist/request.mjs +71 -74
- package/dist/request.mjs.map +1 -1
- package/dist/shared.cjs +87 -26
- package/dist/shared.cjs.map +1 -1
- package/dist/shared.d.ts +1 -1
- package/dist/shared.mjs +87 -28
- package/dist/shared.mjs.map +1 -1
- package/dist/state.cjs +26 -25
- package/dist/state.cjs.map +1 -1
- package/dist/state.mjs +27 -27
- package/dist/state.mjs.map +1 -1
- package/dist/time.cjs +45 -35
- package/dist/time.cjs.map +1 -1
- package/dist/time.mjs +45 -37
- package/dist/time.mjs.map +1 -1
- package/dist/types.cjs +0 -2
- package/dist/types.mjs +0 -2
- package/package.json +47 -48
- package/dist/life.cjs +0 -16
- package/dist/life.cjs.map +0 -1
- package/dist/life.mjs +0 -17
- package/dist/life.mjs.map +0 -1
- package/dist/types.cjs.map +0 -1
- package/dist/types.mjs.map +0 -1
package/README.md
CHANGED
|
@@ -9,15 +9,15 @@
|
|
|
9
9
|
|
|
10
10
|
## 包列表
|
|
11
11
|
|
|
12
|
-
| 名称
|
|
13
|
-
|
|
|
14
|
-
| [@cloudcome/utils-core](./packages/utils-core)
|
|
12
|
+
| 名称 | 版本 | 描述 |
|
|
13
|
+
| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
|
|
14
|
+
| [@cloudcome/utils-core](./packages/utils-core) | [](https://npmjs.com/package/@cloudcome/utils-core) | 核心工具库，与运行环境无关的通用工具 |
|
|
15
15
|
| [@cloudcome/utils-browser](./packages/utils-browser) | [](https://npmjs.com/package/@cloudcome/utils-browser) | 浏览器端工具（DOM、Canvas、Cookie、剪贴板等） |
|
|
16
|
-
| [@cloudcome/utils-node](./packages/utils-node)
|
|
17
|
-
| [@cloudcome/utils-vue](./packages/utils-vue)
|
|
18
|
-
| [@cloudcome/utils-react](./packages/utils-react)
|
|
19
|
-
| [@cloudcome/utils-uni](./packages/utils-uni)
|
|
20
|
-
| [@cloudcome/docs](./packages/docs)
|
|
16
|
+
| [@cloudcome/utils-node](./packages/utils-node) | [](https://npmjs.com/package/@cloudcome/utils-node) | Node.js 端工具（Base64、加密、JSONL 等） |
|
|
17
|
+
| [@cloudcome/utils-vue](./packages/utils-vue) | [](https://npmjs.com/package/@cloudcome/utils-vue) | Vue 3 工具库（组合式函数、组件、请求等） |
|
|
18
|
+
| [@cloudcome/utils-react](./packages/utils-react) | [](https://npmjs.com/package/@cloudcome/utils-react) | React 工具库 |
|
|
19
|
+
| [@cloudcome/utils-uni](./packages/utils-uni) | [](https://npmjs.com/package/@cloudcome/utils-uni) | UniApp 工具库（云函数、数据库、页面等） |
|
|
20
|
+
| [@cloudcome/docs](./packages/docs) | - | VitePress 文档站点 |
|
|
21
21
|
|
|
22
22
|
## 功能概览
|
|
23
23
|
|
|
@@ -25,79 +25,80 @@
|
|
|
25
25
|
|
|
26
26
|
核心工具库，提供以下子模块：
|
|
27
27
|
|
|
28
|
-
| 子模块
|
|
29
|
-
|
|
|
30
|
-
| array
|
|
31
|
-
| async
|
|
32
|
-
| base64
|
|
33
|
-
| cache
|
|
34
|
-
| color
|
|
35
|
-
| crypto
|
|
36
|
-
| date
|
|
37
|
-
| dict
|
|
38
|
-
| easing
|
|
39
|
-
| emitter
|
|
40
|
-
| env
|
|
41
|
-
| error
|
|
42
|
-
| exception | `@cloudcome/utils-core/exception` | 异常处理
|
|
43
|
-
| function
|
|
44
|
-
| number
|
|
45
|
-
| object
|
|
46
|
-
| path
|
|
47
|
-
| promise
|
|
48
|
-
| qs
|
|
49
|
-
| regexp
|
|
50
|
-
| string
|
|
51
|
-
| time
|
|
52
|
-
| timer
|
|
53
|
-
| tree
|
|
54
|
-
| try
|
|
55
|
-
| type
|
|
56
|
-
| types
|
|
57
|
-
| unique
|
|
58
|
-
| url
|
|
59
|
-
| version
|
|
28
|
+
| 子模块 | 导入路径 | 功能 |
|
|
29
|
+
| --------- | --------------------------------- | ------------------------------------------------------- |
|
|
30
|
+
| array | `@cloudcome/utils-core/array` | 数组操作 |
|
|
31
|
+
| async | `@cloudcome/utils-core/async` | 异步工具 |
|
|
32
|
+
| base64 | `@cloudcome/utils-core/base64` | Base64 编解码 |
|
|
33
|
+
| cache | `@cloudcome/utils-core/cache` | 缓存工具 |
|
|
34
|
+
| color | `@cloudcome/utils-core/color` | 颜色转换（RGB/HSL/HSV/HWB/LAB/XYZ）、对比度、亮度、混合 |
|
|
35
|
+
| crypto | `@cloudcome/utils-core/crypto` | 加密（MD5、SHA1、SHA256、SHA512） |
|
|
36
|
+
| date | `@cloudcome/utils-core/date` | 日期解析、格式化、时区、相对时间、周/天计算 |
|
|
37
|
+
| dict | `@cloudcome/utils-core/dict` | 字典/映射工具 |
|
|
38
|
+
| easing | `@cloudcome/utils-core/easing` | 缓动函数 |
|
|
39
|
+
| emitter | `@cloudcome/utils-core/emitter` | 事件发射器 |
|
|
40
|
+
| env | `@cloudcome/utils-core/env` | 环境检测 |
|
|
41
|
+
| error | `@cloudcome/utils-core/error` | 错误处理 |
|
|
42
|
+
| exception | `@cloudcome/utils-core/exception` | 异常处理 |
|
|
43
|
+
| function | `@cloudcome/utils-core/function` | 函数工具 |
|
|
44
|
+
| number | `@cloudcome/utils-core/number` | 数字工具 |
|
|
45
|
+
| object | `@cloudcome/utils-core/object` | 对象遍历、深层 get/set、合并、类型判断 |
|
|
46
|
+
| path | `@cloudcome/utils-core/path` | 路径工具 |
|
|
47
|
+
| promise | `@cloudcome/utils-core/promise` | Promise 工具 |
|
|
48
|
+
| qs | `@cloudcome/utils-core/qs` | 查询字符串解析与序列化 |
|
|
49
|
+
| regexp | `@cloudcome/utils-core/regexp` | 正则表达式工具 |
|
|
50
|
+
| string | `@cloudcome/utils-core/string` | 字符串工具 |
|
|
51
|
+
| time | `@cloudcome/utils-core/time` | 时间单位转换 |
|
|
52
|
+
| timer | `@cloudcome/utils-core/timer` | 定时器工具 |
|
|
53
|
+
| tree | `@cloudcome/utils-core/tree` | 树结构操作 |
|
|
54
|
+
| try | `@cloudcome/utils-core/try` | 安全调用（try-catch 包装，支持同步/异步/柯里化） |
|
|
55
|
+
| type | `@cloudcome/utils-core/type` | 类型判断 |
|
|
56
|
+
| types | `@cloudcome/utils-core/types` | 公共类型定义 |
|
|
57
|
+
| unique | `@cloudcome/utils-core/unique` | 唯一 ID 生成 |
|
|
58
|
+
| url | `@cloudcome/utils-core/url` | URL 解析与构建 |
|
|
59
|
+
| version | `@cloudcome/utils-core/version` | 版本号比较 |
|
|
60
60
|
|
|
61
61
|
### @cloudcome/utils-browser
|
|
62
62
|
|
|
63
63
|
浏览器端工具库，依赖 `@cloudcome/utils-core`：
|
|
64
64
|
|
|
65
|
-
| 子模块
|
|
66
|
-
|
|
|
67
|
-
| base64
|
|
68
|
-
| cache
|
|
69
|
-
| canvas
|
|
70
|
-
| clipboard | `@cloudcome/utils-browser/clipboard` | 剪贴板读写
|
|
71
|
-
| cookie
|
|
72
|
-
| dom
|
|
73
|
-
| download
|
|
74
|
-
| image
|
|
75
|
-
| timer
|
|
76
|
-
| video
|
|
65
|
+
| 子模块 | 导入路径 | 功能 |
|
|
66
|
+
| --------- | ------------------------------------ | ----------------------------------------- |
|
|
67
|
+
| base64 | `@cloudcome/utils-browser/base64` | 浏览器端 Base64 编解码 |
|
|
68
|
+
| cache | `@cloudcome/utils-browser/cache` | 浏览器缓存（localStorage/sessionStorage） |
|
|
69
|
+
| canvas | `@cloudcome/utils-browser/canvas` | Canvas 操作 |
|
|
70
|
+
| clipboard | `@cloudcome/utils-browser/clipboard` | 剪贴板读写 |
|
|
71
|
+
| cookie | `@cloudcome/utils-browser/cookie` | Cookie 读写 |
|
|
72
|
+
| dom | `@cloudcome/utils-browser/dom` | DOM 操作 |
|
|
73
|
+
| download | `@cloudcome/utils-browser/download` | 文件下载 |
|
|
74
|
+
| image | `@cloudcome/utils-browser/image` | 图片处理 |
|
|
75
|
+
| timer | `@cloudcome/utils-browser/timer` | 浏览器端定时器 |
|
|
76
|
+
| video | `@cloudcome/utils-browser/video` | 视频处理 |
|
|
77
77
|
|
|
78
78
|
### @cloudcome/utils-node
|
|
79
79
|
|
|
80
80
|
Node.js 端工具库：
|
|
81
81
|
|
|
82
|
-
| 子模块 | 导入路径
|
|
83
|
-
|
|
|
82
|
+
| 子模块 | 导入路径 | 功能 |
|
|
83
|
+
| ------ | ------------------------------ | ------------------------ |
|
|
84
84
|
| base64 | `@cloudcome/utils-node/base64` | Node.js 端 Base64 编解码 |
|
|
85
|
-
| crypto | `@cloudcome/utils-node/crypto` | Node.js 端加密工具
|
|
85
|
+
| crypto | `@cloudcome/utils-node/crypto` | Node.js 端加密工具 |
|
|
86
|
+
| jsonl | `@cloudcome/utils-node/jsonl` | JSONL 文件读写 |
|
|
86
87
|
|
|
87
88
|
### @cloudcome/utils-vue
|
|
88
89
|
|
|
89
90
|
Vue 3 工具库，依赖 `@cloudcome/utils-core` 和 `vue`：
|
|
90
91
|
|
|
91
|
-
| 子模块
|
|
92
|
-
|
|
|
93
|
-
| async
|
|
94
|
-
| component | `@cloudcome/utils-vue/component` | 组件工具（生命周期等）
|
|
95
|
-
| event
|
|
96
|
-
| request
|
|
97
|
-
| shared
|
|
98
|
-
| state
|
|
99
|
-
| time
|
|
100
|
-
| types
|
|
92
|
+
| 子模块 | 导入路径 | 功能 |
|
|
93
|
+
| --------- | -------------------------------- | ---------------------------- |
|
|
94
|
+
| async | `@cloudcome/utils-vue/async` | Vue 异步组合式函数 |
|
|
95
|
+
| component | `@cloudcome/utils-vue/component` | 组件工具（生命周期等） |
|
|
96
|
+
| event | `@cloudcome/utils-vue/event` | 事件工具 |
|
|
97
|
+
| request | `@cloudcome/utils-vue/request` | 请求组合式函数（useRequest） |
|
|
98
|
+
| shared | `@cloudcome/utils-vue/shared` | 共享工具 |
|
|
99
|
+
| state | `@cloudcome/utils-vue/state` | 状态管理工具 |
|
|
100
|
+
| time | `@cloudcome/utils-vue/time` | 时间相关组合式函数 |
|
|
101
|
+
| types | `@cloudcome/utils-vue/types` | 类型定义 |
|
|
101
102
|
|
|
102
103
|
### @cloudcome/utils-react
|
|
103
104
|
|
|
@@ -107,17 +108,15 @@ React 工具库。
|
|
|
107
108
|
|
|
108
109
|
UniApp 工具库，依赖 `@cloudcome/utils-core`、`@cloudcome/utils-vue`：
|
|
109
110
|
|
|
110
|
-
| 子模块
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
| database | `@cloudcome/utils-uni/database` | 数据库操作（CRUD、事务、分页、upsert 等） |
|
|
116
|
-
| page | `@cloudcome/utils-uni/page` | 页面相关工具 |
|
|
111
|
+
| 子模块 | 导入路径 | 功能 |
|
|
112
|
+
| -------- | ------------------------------- | ---------------------------------------------------- |
|
|
113
|
+
| client | `@cloudcome/utils-uni/client` | 客户端工具（App/页面生命周期、消息提示、异步工具等） |
|
|
114
|
+
| cloud | `@cloudcome/utils-uni/cloud` | 云函数工具（调用、错误处理、uni-id 等） |
|
|
115
|
+
| database | `@cloudcome/utils-uni/database` | 数据库操作（CRUD、事务、分页、upsert 等） |
|
|
117
116
|
|
|
118
117
|
## 开发
|
|
119
118
|
|
|
120
|
-
详见 [
|
|
119
|
+
详见 [CONTRIBUTING.md](./CONTRIBUTING.md)。
|
|
121
120
|
|
|
122
121
|
## 许可
|
|
123
122
|
|
package/dist/async.cjs
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
require("
|
|
4
|
-
|
|
2
|
+
let vue = require("vue");
|
|
3
|
+
//#region src/async.ts
|
|
5
4
|
function useAsync(fn, options) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
};
|
|
5
|
+
const times = (0, vue.ref)(0);
|
|
6
|
+
const loading = (0, vue.ref)(false);
|
|
7
|
+
const placeholder = options?.placeholder;
|
|
8
|
+
const data = (0, vue.ref)(placeholder ? placeholder() : null);
|
|
9
|
+
const error = (0, vue.ref)(null);
|
|
10
|
+
const state = (0, vue.computed)(() => ({
|
|
11
|
+
times: times.value,
|
|
12
|
+
loading: loading.value,
|
|
13
|
+
data: data.value,
|
|
14
|
+
error: error.value
|
|
15
|
+
}));
|
|
16
|
+
const runAsync = async (...inputs) => {
|
|
17
|
+
loading.value = true;
|
|
18
|
+
error.value = null;
|
|
19
|
+
try {
|
|
20
|
+
await options?.onBefore?.(...inputs);
|
|
21
|
+
times.value++;
|
|
22
|
+
data.value = await fn(...inputs);
|
|
23
|
+
await options?.onSuccess?.(data.value, ...inputs);
|
|
24
|
+
return data.value;
|
|
25
|
+
} catch (err) {
|
|
26
|
+
error.value = err;
|
|
27
|
+
try {
|
|
28
|
+
options?.onError?.(err, ...inputs);
|
|
29
|
+
} catch {}
|
|
30
|
+
throw err;
|
|
31
|
+
} finally {
|
|
32
|
+
loading.value = false;
|
|
33
|
+
await options?.onAfter?.(...inputs);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
const run = (...inputs) => {
|
|
37
|
+
runAsync(...inputs).then();
|
|
38
|
+
};
|
|
39
|
+
return {
|
|
40
|
+
state,
|
|
41
|
+
/**
|
|
42
|
+
* 是否正在加载。
|
|
43
|
+
*/
|
|
44
|
+
loading,
|
|
45
|
+
/**
|
|
46
|
+
* 异步操作返回的数据。
|
|
47
|
+
*/
|
|
48
|
+
data,
|
|
49
|
+
/**
|
|
50
|
+
* 异步操作抛出的错误。
|
|
51
|
+
*/
|
|
52
|
+
error,
|
|
53
|
+
/**
|
|
54
|
+
* 执行异步操作并返回 Promise。
|
|
55
|
+
* @param inputs 异步函数的参数。
|
|
56
|
+
* @returns 异步操作的结果。
|
|
57
|
+
*/
|
|
58
|
+
runAsync,
|
|
59
|
+
/**
|
|
60
|
+
* 执行异步操作但不返回 Promise。
|
|
61
|
+
* @param inputs 异步函数的参数。
|
|
62
|
+
*/
|
|
63
|
+
run
|
|
64
|
+
};
|
|
67
65
|
}
|
|
66
|
+
//#endregion
|
|
68
67
|
exports.useAsync = useAsync;
|
|
69
|
-
|
|
68
|
+
|
|
69
|
+
//# sourceMappingURL=async.cjs.map
|
package/dist/async.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"async.cjs","sources":["../src/async.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"async.cjs","names":[],"sources":["../src/async.ts"],"sourcesContent":["import type { AnyArray } from '@cloudcome/utils-core/types';\nimport { type ComputedRef, computed, type Ref, ref } from 'vue';\n\n/**\n * 异步操作的配置选项\n * @template T 异步操作返回的数据类型\n * @template P 异步操作的参数类型\n */\nexport type UseAsyncOptions<I extends AnyArray, O> = {\n placeholder?: () => O;\n\n /**\n * 异步操作开始前的回调函数，可用于执行初始化逻辑或显示加载状态，抛出错误则中断操作\n */\n onBefore?: (...inputs: I) => unknown;\n\n /**\n * 异步操作成功后的回调函数，可用于处理成功后的数据更新或通知。\n * @param data 异步操作返回的数据。\n */\n onSuccess?: (data: O, ...inputs: I) => unknown;\n\n /**\n * 异步操作失败后的回调函数，可用于记录错误日志或显示错误提示。\n * @param err 异步操作抛出的错误。\n */\n onError?: (err: unknown, ...inputs: I) => unknown;\n\n /**\n * 异步操作结束后的回调函数（无论成功或失败），可用于清理操作或触发后续逻辑。\n */\n onAfter?: (...inputs: I) => unknown;\n};\n\nexport type UseAsyncState<O> = {\n times: number;\n loading: boolean;\n error: unknown;\n data: O | null;\n};\n\nexport type UseAsyncStateFilled<O> = {\n times: number;\n loading: boolean;\n error: unknown;\n data: O;\n};\n\nexport type UseAsyncOutput<I extends AnyArray, O> = {\n state: ComputedRef<UseAsyncState<O>>;\n loading: Ref<boolean>;\n data: Ref<O | null>;\n error: Ref<unknown>;\n run: (...inputs: I) => void;\n runAsync: (...inputs: I) => Promise<O>;\n};\n\nexport type UseAsyncOutputFilled<I extends AnyArray, O> = {\n state: ComputedRef<UseAsyncStateFilled<O>>;\n loading: Ref<boolean>;\n data: Ref<O>;\n error: Ref<unknown>;\n run: (...inputs: I) => void;\n runAsync: (...inputs: I) => Promise<O>;\n};\n\n/**\n * 用于处理异步操作的组合式函数。\n * 提供加载状态、数据、错误信息以及执行方法。\n * @template O 异步函数返回的数据类型\n * @template I 异步函数的入参类型\n * @param fn 异步函数，接收参数并返回 Promise。\n * @param options 异步操作的配置选项。\n * @returns 包含状态和操作方法的对象：\n * - loading: 是否正在加载。\n * - data: 异步操作返回的数据。\n * - error: 异步操作抛出的错误。\n * - runAsync: 执行异步操作并返回 Promise。\n * - run: 执行异步操作但不返回 Promise。\n * @example\n * const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {\n * const response = await fetch(`/api/user/${id}`);\n * return response.json();\n * }, {\n * onBefore: () => console.log('Fetching user data...'),\n * onSuccess: (data) => console.log('User data fetched:', data),\n * onError: (err) => console.error('Failed to fetch user data:', err),\n * onFinally: () => console.log('Fetch operation completed.'),\n * });\n */\nexport function useAsync<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options: Omit<UseAsyncOptions<I, O>, 'placeholder'> & {\n placeholder: () => O;\n },\n): UseAsyncOutputFilled<I, O>;\nexport function useAsync<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options?: UseAsyncOptions<I, O>,\n): UseAsyncOutput<I, O>;\nexport function useAsync<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options?: UseAsyncOptions<I, O>,\n): UseAsyncOutput<I, O> {\n const times = ref(0);\n const loading = ref(false);\n const placeholder = options?.placeholder;\n const data = ref(placeholder ? placeholder() : null) as Ref<O | null>;\n const error = ref<unknown>(null);\n const state = computed(() => ({\n times: times.value,\n loading: loading.value,\n data: data.value,\n error: error.value,\n }));\n\n const runAsync = async (...inputs: I): Promise<O> => {\n loading.value = true;\n error.value = null;\n\n try {\n await options?.onBefore?.(...inputs);\n times.value++;\n data.value = await fn(...inputs);\n await options?.onSuccess?.(data.value, ...inputs);\n return data.value;\n } catch (err) {\n error.value = err;\n try {\n options?.onError?.(err, ...inputs);\n } catch {\n //\n }\n throw err;\n } finally {\n loading.value = false;\n await options?.onAfter?.(...inputs);\n }\n };\n\n const run = (...inputs: I) => {\n runAsync(...inputs).then();\n };\n\n return {\n state,\n /**\n * 是否正在加载。\n */\n loading,\n\n /**\n * 异步操作返回的数据。\n */\n data,\n\n /**\n * 异步操作抛出的错误。\n */\n error,\n\n /**\n * 执行异步操作并返回 Promise。\n * @param inputs 异步函数的参数。\n * @returns 异步操作的结果。\n */\n runAsync,\n\n /**\n * 执行异步操作但不返回 Promise。\n * @param inputs 异步函数的参数。\n */\n run,\n };\n}\n\n// const { run: run1 } = useAsync(() => Promise.resolve(1));\n// run1();\n\n// const { run: run2 } = useAsync((a: number) => Promise.resolve(1));\n// run2(2);\n\n// const { run: run3 } = useAsync((a: number, b: string) => Promise.resolve(1));\n// run3(2, '2');\n"],"mappings":";;;AAoGA,SAAgB,SACd,IACA,SACsB;CACtB,MAAM,SAAA,GAAA,IAAA,KAAY,EAAE;CACpB,MAAM,WAAA,GAAA,IAAA,KAAc,MAAM;CAC1B,MAAM,cAAc,SAAS;CAC7B,MAAM,QAAA,GAAA,IAAA,KAAW,cAAc,aAAa,GAAG,KAAK;CACpD,MAAM,SAAA,GAAA,IAAA,KAAqB,KAAK;CAChC,MAAM,SAAA,GAAA,IAAA,iBAAwB;EAC5B,OAAO,MAAM;EACb,SAAS,QAAQ;EACjB,MAAM,KAAK;EACX,OAAO,MAAM;EACd,EAAE;CAEH,MAAM,WAAW,OAAO,GAAG,WAA0B;EACnD,QAAQ,QAAQ;EAChB,MAAM,QAAQ;EAEd,IAAI;GACF,MAAM,SAAS,WAAW,GAAG,OAAO;GACpC,MAAM;GACN,KAAK,QAAQ,MAAM,GAAG,GAAG,OAAO;GAChC,MAAM,SAAS,YAAY,KAAK,OAAO,GAAG,OAAO;GACjD,OAAO,KAAK;WACL,KAAK;GACZ,MAAM,QAAQ;GACd,IAAI;IACF,SAAS,UAAU,KAAK,GAAG,OAAO;WAC5B;GAGR,MAAM;YACE;GACR,QAAQ,QAAQ;GAChB,MAAM,SAAS,UAAU,GAAG,OAAO;;;CAIvC,MAAM,OAAO,GAAG,WAAc;EAC5B,SAAS,GAAG,OAAO,CAAC,MAAM;;CAG5B,OAAO;EACL;;;;EAIA;;;;EAKA;;;;EAKA;;;;;;EAOA;;;;;EAMA;EACD"}
|
package/dist/async.mjs
CHANGED
|
@@ -1,69 +1,68 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
1
|
+
import { computed, ref } from "vue";
|
|
2
|
+
//#region src/async.ts
|
|
3
3
|
function useAsync(fn, options) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
};
|
|
4
|
+
const times = ref(0);
|
|
5
|
+
const loading = ref(false);
|
|
6
|
+
const placeholder = options?.placeholder;
|
|
7
|
+
const data = ref(placeholder ? placeholder() : null);
|
|
8
|
+
const error = ref(null);
|
|
9
|
+
const state = computed(() => ({
|
|
10
|
+
times: times.value,
|
|
11
|
+
loading: loading.value,
|
|
12
|
+
data: data.value,
|
|
13
|
+
error: error.value
|
|
14
|
+
}));
|
|
15
|
+
const runAsync = async (...inputs) => {
|
|
16
|
+
loading.value = true;
|
|
17
|
+
error.value = null;
|
|
18
|
+
try {
|
|
19
|
+
await options?.onBefore?.(...inputs);
|
|
20
|
+
times.value++;
|
|
21
|
+
data.value = await fn(...inputs);
|
|
22
|
+
await options?.onSuccess?.(data.value, ...inputs);
|
|
23
|
+
return data.value;
|
|
24
|
+
} catch (err) {
|
|
25
|
+
error.value = err;
|
|
26
|
+
try {
|
|
27
|
+
options?.onError?.(err, ...inputs);
|
|
28
|
+
} catch {}
|
|
29
|
+
throw err;
|
|
30
|
+
} finally {
|
|
31
|
+
loading.value = false;
|
|
32
|
+
await options?.onAfter?.(...inputs);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
const run = (...inputs) => {
|
|
36
|
+
runAsync(...inputs).then();
|
|
37
|
+
};
|
|
38
|
+
return {
|
|
39
|
+
state,
|
|
40
|
+
/**
|
|
41
|
+
* 是否正在加载。
|
|
42
|
+
*/
|
|
43
|
+
loading,
|
|
44
|
+
/**
|
|
45
|
+
* 异步操作返回的数据。
|
|
46
|
+
*/
|
|
47
|
+
data,
|
|
48
|
+
/**
|
|
49
|
+
* 异步操作抛出的错误。
|
|
50
|
+
*/
|
|
51
|
+
error,
|
|
52
|
+
/**
|
|
53
|
+
* 执行异步操作并返回 Promise。
|
|
54
|
+
* @param inputs 异步函数的参数。
|
|
55
|
+
* @returns 异步操作的结果。
|
|
56
|
+
*/
|
|
57
|
+
runAsync,
|
|
58
|
+
/**
|
|
59
|
+
* 执行异步操作但不返回 Promise。
|
|
60
|
+
* @param inputs 异步函数的参数。
|
|
61
|
+
*/
|
|
62
|
+
run
|
|
63
|
+
};
|
|
65
64
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
//# sourceMappingURL=async.mjs.map
|
|
65
|
+
//#endregion
|
|
66
|
+
export { useAsync };
|
|
67
|
+
|
|
68
|
+
//# sourceMappingURL=async.mjs.map
|
package/dist/async.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"async.mjs","sources":["../src/async.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"async.mjs","names":[],"sources":["../src/async.ts"],"sourcesContent":["import type { AnyArray } from '@cloudcome/utils-core/types';\nimport { type ComputedRef, computed, type Ref, ref } from 'vue';\n\n/**\n * 异步操作的配置选项\n * @template T 异步操作返回的数据类型\n * @template P 异步操作的参数类型\n */\nexport type UseAsyncOptions<I extends AnyArray, O> = {\n placeholder?: () => O;\n\n /**\n * 异步操作开始前的回调函数，可用于执行初始化逻辑或显示加载状态，抛出错误则中断操作\n */\n onBefore?: (...inputs: I) => unknown;\n\n /**\n * 异步操作成功后的回调函数，可用于处理成功后的数据更新或通知。\n * @param data 异步操作返回的数据。\n */\n onSuccess?: (data: O, ...inputs: I) => unknown;\n\n /**\n * 异步操作失败后的回调函数，可用于记录错误日志或显示错误提示。\n * @param err 异步操作抛出的错误。\n */\n onError?: (err: unknown, ...inputs: I) => unknown;\n\n /**\n * 异步操作结束后的回调函数（无论成功或失败），可用于清理操作或触发后续逻辑。\n */\n onAfter?: (...inputs: I) => unknown;\n};\n\nexport type UseAsyncState<O> = {\n times: number;\n loading: boolean;\n error: unknown;\n data: O | null;\n};\n\nexport type UseAsyncStateFilled<O> = {\n times: number;\n loading: boolean;\n error: unknown;\n data: O;\n};\n\nexport type UseAsyncOutput<I extends AnyArray, O> = {\n state: ComputedRef<UseAsyncState<O>>;\n loading: Ref<boolean>;\n data: Ref<O | null>;\n error: Ref<unknown>;\n run: (...inputs: I) => void;\n runAsync: (...inputs: I) => Promise<O>;\n};\n\nexport type UseAsyncOutputFilled<I extends AnyArray, O> = {\n state: ComputedRef<UseAsyncStateFilled<O>>;\n loading: Ref<boolean>;\n data: Ref<O>;\n error: Ref<unknown>;\n run: (...inputs: I) => void;\n runAsync: (...inputs: I) => Promise<O>;\n};\n\n/**\n * 用于处理异步操作的组合式函数。\n * 提供加载状态、数据、错误信息以及执行方法。\n * @template O 异步函数返回的数据类型\n * @template I 异步函数的入参类型\n * @param fn 异步函数，接收参数并返回 Promise。\n * @param options 异步操作的配置选项。\n * @returns 包含状态和操作方法的对象：\n * - loading: 是否正在加载。\n * - data: 异步操作返回的数据。\n * - error: 异步操作抛出的错误。\n * - runAsync: 执行异步操作并返回 Promise。\n * - run: 执行异步操作但不返回 Promise。\n * @example\n * const { loading, data, error, runAsync, run } = useAsync(async (id: number) => {\n * const response = await fetch(`/api/user/${id}`);\n * return response.json();\n * }, {\n * onBefore: () => console.log('Fetching user data...'),\n * onSuccess: (data) => console.log('User data fetched:', data),\n * onError: (err) => console.error('Failed to fetch user data:', err),\n * onFinally: () => console.log('Fetch operation completed.'),\n * });\n */\nexport function useAsync<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options: Omit<UseAsyncOptions<I, O>, 'placeholder'> & {\n placeholder: () => O;\n },\n): UseAsyncOutputFilled<I, O>;\nexport function useAsync<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options?: UseAsyncOptions<I, O>,\n): UseAsyncOutput<I, O>;\nexport function useAsync<I extends AnyArray, O>(\n fn: (...inputs: I) => Promise<O>,\n options?: UseAsyncOptions<I, O>,\n): UseAsyncOutput<I, O> {\n const times = ref(0);\n const loading = ref(false);\n const placeholder = options?.placeholder;\n const data = ref(placeholder ? placeholder() : null) as Ref<O | null>;\n const error = ref<unknown>(null);\n const state = computed(() => ({\n times: times.value,\n loading: loading.value,\n data: data.value,\n error: error.value,\n }));\n\n const runAsync = async (...inputs: I): Promise<O> => {\n loading.value = true;\n error.value = null;\n\n try {\n await options?.onBefore?.(...inputs);\n times.value++;\n data.value = await fn(...inputs);\n await options?.onSuccess?.(data.value, ...inputs);\n return data.value;\n } catch (err) {\n error.value = err;\n try {\n options?.onError?.(err, ...inputs);\n } catch {\n //\n }\n throw err;\n } finally {\n loading.value = false;\n await options?.onAfter?.(...inputs);\n }\n };\n\n const run = (...inputs: I) => {\n runAsync(...inputs).then();\n };\n\n return {\n state,\n /**\n * 是否正在加载。\n */\n loading,\n\n /**\n * 异步操作返回的数据。\n */\n data,\n\n /**\n * 异步操作抛出的错误。\n */\n error,\n\n /**\n * 执行异步操作并返回 Promise。\n * @param inputs 异步函数的参数。\n * @returns 异步操作的结果。\n */\n runAsync,\n\n /**\n * 执行异步操作但不返回 Promise。\n * @param inputs 异步函数的参数。\n */\n run,\n };\n}\n\n// const { run: run1 } = useAsync(() => Promise.resolve(1));\n// run1();\n\n// const { run: run2 } = useAsync((a: number) => Promise.resolve(1));\n// run2(2);\n\n// const { run: run3 } = useAsync((a: number, b: string) => Promise.resolve(1));\n// run3(2, '2');\n"],"mappings":";;AAoGA,SAAgB,SACd,IACA,SACsB;CACtB,MAAM,QAAQ,IAAI,EAAE;CACpB,MAAM,UAAU,IAAI,MAAM;CAC1B,MAAM,cAAc,SAAS;CAC7B,MAAM,OAAO,IAAI,cAAc,aAAa,GAAG,KAAK;CACpD,MAAM,QAAQ,IAAa,KAAK;CAChC,MAAM,QAAQ,gBAAgB;EAC5B,OAAO,MAAM;EACb,SAAS,QAAQ;EACjB,MAAM,KAAK;EACX,OAAO,MAAM;EACd,EAAE;CAEH,MAAM,WAAW,OAAO,GAAG,WAA0B;EACnD,QAAQ,QAAQ;EAChB,MAAM,QAAQ;EAEd,IAAI;GACF,MAAM,SAAS,WAAW,GAAG,OAAO;GACpC,MAAM;GACN,KAAK,QAAQ,MAAM,GAAG,GAAG,OAAO;GAChC,MAAM,SAAS,YAAY,KAAK,OAAO,GAAG,OAAO;GACjD,OAAO,KAAK;WACL,KAAK;GACZ,MAAM,QAAQ;GACd,IAAI;IACF,SAAS,UAAU,KAAK,GAAG,OAAO;WAC5B;GAGR,MAAM;YACE;GACR,QAAQ,QAAQ;GAChB,MAAM,SAAS,UAAU,GAAG,OAAO;;;CAIvC,MAAM,OAAO,GAAG,WAAc;EAC5B,SAAS,GAAG,OAAO,CAAC,MAAM;;CAG5B,OAAO;EACL;;;;EAIA;;;;EAKA;;;;EAKA;;;;;;EAOA;;;;;EAMA;EACD"}
|
package/dist/component/self.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ import { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
|
|
|
8
8
|
* @example
|
|
9
9
|
* const compRef = useExpose(MyComponent)
|
|
10
10
|
*/
|
|
11
|
-
export declare function useExpose<T>(
|
|
11
|
+
export declare function useExpose<T>(_Comp: T): Ref<ComponentExposed<T> | null>;
|
|
12
12
|
/**
|
|
13
13
|
* 将字符串的首字母转换为小写
|
|
14
14
|
* @template S 字符串类型
|
|
@@ -39,9 +39,9 @@ type PickEmits<T> = {
|
|
|
39
39
|
* console.log('click event', payload)
|
|
40
40
|
* })
|
|
41
41
|
*/
|
|
42
|
-
export declare function useEmit<T, E extends PickEmits<Required<ComponentProps<T>>>, K extends keyof E>(
|
|
42
|
+
export declare function useEmit<T, E extends PickEmits<Required<ComponentProps<T>>>, K extends keyof E>(_Comp: T, _event: K, listener: E[K]): E[K];
|
|
43
43
|
type PickMethods<T> = {
|
|
44
|
-
[K in keyof T]: T[K] extends (...args:
|
|
44
|
+
[K in keyof T]: T[K] extends (...args: unknown[]) => any ? T[K] : never;
|
|
45
45
|
};
|
|
46
46
|
/**
|
|
47
47
|
* 从组件props中提取方法并返回指定方法
|
|
@@ -57,5 +57,5 @@ type PickMethods<T> = {
|
|
|
57
57
|
* console.log('update value', value)
|
|
58
58
|
* })
|
|
59
59
|
*/
|
|
60
|
-
export declare function useMethod<T, M extends PickMethods<Required<ComponentProps<T>>>, K extends keyof M>(
|
|
60
|
+
export declare function useMethod<T, M extends PickMethods<Required<ComponentProps<T>>>, K extends keyof M>(_Comp: T, _name: K, method: M[K]): M[K];
|
|
61
61
|
export {};
|