vue-asyncx 1.7.0 → 1.8.0

package/README.md

@@ -1,10 +1,13 @@
+优雅好用的异步函数/数据管理工具
+
+![](./docs/compare.png)
+
 ## 特性
 
-- 效率+：异步相关样板代码减少50%
-- 效率+：自动处理异步操作的乱序响应
+- 效率+：异步相关样板代码减少40%+
 - 可读+：异步操作命名指向明确、风格统一
-- 可读+：易于写出符合“干净架构”理念的函数
 - 质量+：全 TS 支持 + 100% 单元测试
+- 维护+：易于写出符合“干净架构”理念的函数
 
 ## 安装
 
@@ -12,126 +15,102 @@
 pnpm i vue-asyncx
 ```
 
-## 使用
-
-### useAsync 异步函数
-
-当需要执行一个异步函数，可以将要执行的异步函数传入 `useAsync` 中，得到
-
-- 一个异步函数的包裹函数
-- 一个记录异步函数执行 `loading` 响应式数据
-- 等等
+## 快速开始
 
 ```ts
-import { useAsync } from 'vue-asyncx'
+import { getUserApi } from './api'
+import { useAsyncData } from '../dist/vue-asyncx'
 
 const { 
-  method, 
-  methodLoading,
-} = useAsync(async (a: number, b: number) => a + b)
+  user, 
+  queryUserLoading,
+  queryUser, 
+} = useAsyncData('user', getUserApi)
 
-method(1, 1).then(total => console.log(total))
+queryUser('Mike')
 ```
 
-如果不喜欢默认解构出来的 `method` 与 `methodLoading`，除了解构赋值的重命名，你还可以直接：
+当需要异步数据 `user` 时，只需要传入数据的变量名和获取数据的异步函数即可。`useAsyncData` 会自动处理与异步函数相关的 `loading`, `data`, `function`、`error` 等状态。
 
-```ts
-import { useAsync } from 'vue-asyncx'
+## 约定带来效率
 
-const { 
-  sum, 
-  sumLoading
-} = useAsync('sum', async (a: number, b: number) => a + b)
+与 [`useRequest`](https://ahooks.js.org/hooks/use-request/index) 返回固定的 `data`、`loading`、`error` 不同，`useAsyncData` 将关联的函数、变量统一命名：
 
-sum(1, 1).then(total => console.log(total))
-```
+- `user`：由异步函数更新的数据 `data`
+- `queryUser`：更新 `user` 的异步函数
+- `queryUserLoading`：调用 `queryUser` 时的 `loading` 状态
 
-当你将 `sum` 字符串传入 `useAsync`，结果属性自动替换为 `sum` 和 `sumLoading`，并且，**解构附带 ts 提示**，在结果对象内输入 `s`，相关内容会自动提示。
+刚接触可能有些不习惯，但这种方式带来可读性和效率的双重提升，在大型项目、多人团队中尤为明显。
 
-同时，解构出的 `sum` TS 类型由传入的函数推导出，二者 TS 类型一致。
+代码中看到 `queryUserLoading` 变量，就知道它和 `user` 变量以及 `queryUser` 函数有关。
 
-想象一下在多人合作的大型项目中，通过这种方式约束命名：不同开发人员可以自然地将相同模式的变量名关联在一起，互相理解代码、review 内容变得更简单。
+![](./docs/vscode-hint.png)
 
-### useAsyncData 异步数据
+并且这一切，都可以自动提示。
 
-除了异步函数，另一个常见场景是异步数据。
+## 用法
 
-假设你在开发一个用户详情页，页面通过 `user` 数据渲染，`user` 数据通过 `getUserById` 的 api 获取。
+### 立即执行
 
-显然，`user` 是一个异步数据，通过 `useAsyncData`，你可以很容易处理这些内容：
+默认情况下，异步函数需要手动调用，可以设置 `options.immediate = true` 自动触发异步函数。
 
 ```ts
-import { getUserById } from '@/api'
-import { useAsyncData } from 'vue-asyncx'
-
-/**
- * 调用 useAsyncData('user', ...)，
- * user、queryUserLoading、queryUser 自动提示
- */
 const { 
   user, 
-  queryUserLoading, 
-  queryUser 
-} = useAsyncData('user', () => getUserById('1'), { immediate: true })
+  queryUserLoading 
+} = useAsyncData('user', getUserApi, { immediate: true })
 ```
 
-代码编写流程与思路流程高度一致：
-- 数据命名：页面需要使用异步数据 user => `useAsyncData('user', `
-- 数据获取：user 数据来自 getUserById 接口 => `useAsyncData('user', () => getUserById('1')`
-- 触发获取：进入页面后需要立即获取 user 数据 `useAsyncData('user', () => getUserById('1'), { immediate: true })`
+### watch 执行
 
-ok，写完上述，页面所需的 `user` 各种相关数据、函数立即出现，想用什么解构什么：
+除了 `immediate`，`useAsyncData` 还完整支持 [vue watch](https://vuejs.org/api/reactivity-core.html#watch)
 
-- `user` 响应式变量自动定义并声明
-- 获取 `user` 的函数被自动命名为 `queryUser`
-- 调用 `queryUser` 时的加载状态自动关联到 `queryUserLoading`
+#### `options.watch` 配置 watch source
 
-只需要在 TS 的提示下，按需解构出页面所需的内容
+```ts
+import { getUserApi } from './api'
+import { useAsyncData } from '../dist/vue-asyncx'
 
-> `useAsyncData` 底层使用 `useAsync`，即 `useAsync` 的所有能力 `useAsyncData` 都具备。
-> 除 `useAsync` 的能力外，`useAsyncData` 额外支持了一些与数据相关的能力。
-> 二者区别：
-> `useAsync` 关注异步函数，不关注需要长久保留结果值。例如 `submit`、`confirm` 等操作
-> `useAsyncData` 则关注异步数据，异步函数则是数据的获取方式
+const props = defineProps<{
+  userId: string;
+}>();
 
-### immediate 与 watch
+const { user } = useAsyncData('user', () => getUserApi(props.userId), { 
+  watch: () => props.userId,
+  immediate: true
+})
+```
 
-注意到上面例子里的 `useAsyncData` 使用了 `immediate` 配置，效果是立即调用 `queryUser`
+`useAsyncData` 会立即执行，并在每次 `props.userId` 变化时执行。
 
-这个配置来自 vue `watch`，除了 `immediate` 外，**`useAsync` 和 `useAsyncData`** 完整支持了 vue watch 的各种配置
-- 通过 `options.watch` 配置 watch source
-- 通过 `options.watchOptions` 配置 watch 的其它 options
+上面的写法等价于：
 
-比如常见的通过 props 传递参数，props 参数改变，触发异步数据改变：
+```ts
+const { user, queryUser } = useAsyncData('user', () => getUserApi(props.userId))
+watch(() => props.userId, () => queryUser(), { immediate: true })
+```
 
-```js
-const { 
-  user, 
-  queryUserLoading, 
-  queryUser 
-} = useAsyncData('user', () => getUserById(props.id), { 
-  watch: () => props.id, // 此处用 props 举例，支持所有 vue watch source 的用法
-  immediate: true,
+#### `options.watchOptions` 配置 watch options
+
+```ts
+const { user } = useAsyncData('user', () => getUserApi(props.userId), { 
+  watch: () => props.userId,
   watchOptions: {
-    once: true // 此处用 once 举例，支持所有 vue watch options 内的配置
-    // 这里也可以配置 immediate，与上一层的 immediate 效果一致，优先级更高
+    once: true, // 此处用 once 举例，支持所有 vue watch options 内的配置
   }
 })
 ```
 
-实际上即使不配置 `options.watch`，配置 `options.immediate = true` 后内部也是通过 watch 机制触发的立即调用
+> 注：`options.watchOptions.immediate` 优先级高于 `options.immediate`
 
-默认情况下，由 watch 触发的调用不会传递任何参数。watch 的 handler 相当于：`() => queryUser()`。但在 vue 中，watch 的 handler 可以接收新、旧数据以及 `onCleanup`
+#### `options.watchOptions.handlerCreator` 配置 watch handler
 
-`useAsync` 和 `useAsyncData` 可以通过配置 `options.watchOptions.handlerCreator` 来自定义 watch handler：
-
-```js
+```ts
 const { 
-  user, 
-  queryUserLoading, 
+  user,
   queryUser 
-} = useAsyncData('user', (id) => getUserById(id), { 
-  watch: () => props.id,
+} = useAsyncData('user', (userId) => getUserApi(userId), { 
+  watch: () => props.userId,
   immediate: true,
   watchOptions: {
     // fn 等价于 queryUser
@@ -147,130 +126,20 @@ const {
 })
 ```
 
-### 调用报错与参数
-
-除了 `loading`，`useAsync` 与 `useAsyncData` 还支持记录调用的 `error` 与 `arguments`，默认状态下，它们的命名是：
-
-```js
-const { 
-  methodError,
-  methodArguments,
-} = useAsync(() => {})
-
-const { 
-  queryDataError,
-  queryDataArguments
-} = useAsyncData(() => {})
-```
-
-与之前例子一致，当自定义命名时，结果随之改变：
-
-```js
-const { 
-  confirmError,
-  confirmArguments,
-} = useAsync('confirm', () => {})
-
-const { 
-  queryUserError,
-  queryUserArguments
-} = useAsyncData('user', () => {})
-```
-
-`error`
-- **最后一次**调用 fn，**且**调用结果失败
-  - 记录异步 fn 的 reject 内容
-  - 记录同步 fn 的 throw 内容
-- **新一次**调用开始后，`error` 自动置空
+### 初始数据配置
 
-`arguments`
-- 与 `loading` 一致，调用开始时记录本次调用传入的参数
-- 调用结果出现后，`arguments` 自动置空
-
-### 异步函数乱序响应
-
-```js
-// 使用 useAsync，没有 user 变量
-const { 
-  queryUser,
-  queryUserLoading,
-} = useAsync('queryUser', () => {})
-
-// 或者，使用 useAsyncData
-const { 
-  user,
-  queryUser,
-  queryUserLoading
-} = useAsyncData('user', () => {})
-```
-
-`queryUser` 是个异步函数，由于异步操作时间不定，多次调用情况下会出现乱序响应，考虑下列的时间线顺序：
-
-- **首次调用** `queryUser`，记做 `queryUser1`
-- `queryUser1` 未结束，**再次调用** `queryUser`，记做 `queryUser2`
-- `queryUser2` 先结束
-- `queryUser1` 后结束
-
-即：**依次调用 `queryUser1` 和 `queryUser2`，但 `queryUser2` 先于 `queryUser1` 结束**。这种场景很常见，专门处理很麻烦。
-
-而使用 `useAsync` 和 `useAsyncData`，你无需再考虑这类问题，方法会自动帮你处理。
-
-以上述例子举例：
-
-- `queryUser1` 开始时，`queryUserLoading.value` 为 `true`
-- **`queryUser2` 结束时**，`queryUserLoading.value` 为 `false`
-
-对于 `useAsyncData`，`queryUser` 对应的 `user` 数据：
-
-- `user.value` 将始终以 `queryUser2` 的结果为准（取**最晚的调用**产生的结果）
-- 即使 `queryUser1` 产生结果的时间更晚，但 `queryUser1` 的结果不会更新到 `user.value` 上
-- `queryUser1` 的结果会被自动舍弃，因为这是一个“过期的”数据
-
-> 另一种处理重复调用的方式是不允许在上次调用未结束时再次调用
-> 
-> 由于 `useAsync` 和 `useAsyncData` 提供了响应式的 `loading`，对于常用组件库，向按钮传入 `loading` 状态或在 `disabled` 属性中添加 `loading` 判断即可轻松避免
->
-> 此处讨论的是因数据源变动导致异步数据需要刷新的场景，比如 `userId` 短时间从 `1` 切换到 `2`，`user` 数据需要做对应刷新
-
-### 数据过期
-
-> 过期数据标注是 `useAsyncData` 独有功能
-
-```js
-const { 
-  user,
-  queryUser,
-  queryUserError,
-  userExpired
-} = useAsyncData('user', () => {})
+```ts
+const { user } = useAsyncData('user', getUserApi, { 
+  // 未配置时，user 首次调用前为 undefined
+  initialData: {} 
+})
 ```
 
-假设是以下时间线：
-
-- 首次调用 `queryUser`，记做 `queryUser1`
-- `queryUser1` 未结束，再次调用 `queryUser`，记做 `queryUser2`
-- `queryUser2` 先结束，**但发生报错**
-- `queryUser1` 后结束
-
-此时：
-- `queryUser2` 的错误会被记录到 `queryUserError.value` 上
-- `queryUser1` 的结果**会被更新到** `user.value` 上
-- `userExpired.value` 会被设置为 `true`，表明当前的 `user.value` 是个过期数据（因为 `user.value` 来自`queryUser1`，而最新的结果是 `queryUser2` 的报错）
-
-> 大多数情况下，无需考虑 `userExpired.value` 的问题，因为它只会在 `queryUserError.value` 出现时出现，优先处理 `queryUserError.value` 往往是更好的做法
+### 异步函数执行过程中更新数据
 
-> `userExpired.value` 为 `true` 后，直到下次调用更新 `user.value` 前，`userExpired.value` 将一直保持 `true` 状态。
-> 原因：`userExpired.value` 为 `true` 后，虽然再次调用了 `queryUser`，但在 `user.value` 再次更新前，`user.value` 当前的值仍是“过期的”珊瑚橘
+`{name}` 数据通常在异步函数调用执行结束时更新，但也可以在异步函数执行过程中更新。
 
-> 由于乱序的问题，如果在 `queryUser1` 时使用了 `.then(res => ...)`，`res` 的值是 `queryUser1` 的结果，与 `user.value` 不一致，这是符合预期的。
-
-### 异步数据的中途获取与更新
-
-> 异步数据中途获取与更新是 `useAsyncData` 独有功能
-
-在某些场景下，我们希望异步数据可以在异步获取过程中更新，无需等到获取过程完全结束。
-
-可以通过 `options.enhanceFirstArgument = true` 支持这种需求。
+通过配置 `options.enhanceFirstArgument = true` 实现。
 
 ```js
 import { unFirstArgumentEnhanced, useAsyncData } from 'vue-asyncx'
@@ -283,10 +152,13 @@ const {
 } = useAsyncData('progress', async (init?: number) => {
   const { getData, updateData } = unFirstArgumentEnhanced(init)
   init = unFirstArgumentEnhanced(init).firstArgument
+  // 同步更新为入参 10
   updateData(init || 0)
   await wait(100)
+  // 间隔 100ms 后，更新为 50
   updateData(50)
   await wait(100)
+  // 间隔 100ms 后，返回 100，本次异步函数完全结束。
   return 100
 }, { 
   enhanceFirstArgument: true
@@ -295,85 +167,58 @@ const {
 queryProgress(10)
 ```
 
-在上述代码的最后一行调用 `queryProgress(10)` 后：
-- `progress.value` 会立即更新为 `10`
-- 100ms 后 `progress.value` 更新为 `50`
-- 再过 100ms 后，`progress.value` 更新为 `100`，本次调用结束
-
-注意到在传入 `useAsyncData` 的 `fn` 内，有
-
-```js
-const { getData, updateData } = unFirstArgumentEnhanced(init)
-init = unFirstArgumentEnhanced(init).firstArgument
-```
-
-原理：
-
 当 `options.enhanceFirstArgument = true` 后
-- `fn` 的首个参数 `init` 便被拓展为 `FirstArgumentEnhanced` 类型。
-- 实际调用 `queryProgress(10)` 时传入的 `10` 在 `fn` 内部通过 `init` 接收时变成了 `{ getData, updateData, firstArgument }`，`10` 被赋在了 `init.firstArgument` 上
+- 异步函数的首个参数 `init` 便被转换为 `FirstArgumentEnhanced` 类型，包含 `{ getData, updateData, firstArgument }` 属性。
+- 调用 `queryProgress(10)` 时传入的 `10` 在异步函数内部被赋在 `init.firstArgument` 上
 - `unFirstArgumentEnhanced(init)` 先解构出 `getData` 和 `updateData`，再将 `init` 重新赋值为传入的 `10`
 
-> 也就是在 `fn` 内部可以直接通过
-> `const { getData, updateData, firstArgument } = init`
-> 但是这样写需要自行处理 TS 类型问题，因此提供了 `unFirstArgumentEnhanced` 辅助函数。
+> 注意，异步函数的 `init` 不可以直接设置默认值。如：`(init: number = 0) => {}`，可以通过 `unFirstArgumentEnhanced(init, 0)` 设置默认值。
 
-只需要记住
+> 注意，`queryProgress()` 时，`'firstArgument' in unFirstArgumentEnhanced(init)` === `false`，这可以用来区分 `queryProgress()` 与 `queryProgress(undefined)`
 
-- 可以像以往一般正常定义 `fn`、调用 `queryProgress`
-- 在 `fn` 内部实现的最上方，加上上述的两行代码，余下即可正常使用
+### Debounce
 
-如果 `fn` 本身不接收参数，那么可以改成普通函数，通过 `arguments[0]` 传递：
+```ts
+import { debounce } from 'es-toolkit';
 
-```js
 const { 
-  progress,
-  queryProgress
-} = useAsyncData('progress', async function () {
-  const { getData, updateData } = unFirstArgumentEnhanced(arguments[0])
-  updateData(0)
-  await wait(100)
-  updateData(50)
-  await wait(100)
-  return 100
-}, { 
-  enhanceFirstArgument: true
+  user, 
+  queryUser 
+} = useAsyncData('user', getUserApi, { 
+  immediate: true,
+  setup(fn) {
+    return debounce(fn, 500)
+  }
 })
-
-queryProgress()
 ```
 
-在某些情况下，需要区分 `queryProgress()` 与 `queryProgress(undefined)`，可以通过：
-
-```js
-const firstArgumentEnhanced = unFirstArgumentEnhanced(arguments[0])
-const undefinedOrEmpty = 'firstArgument' in firstArgumentEnhanced
-```
-
-即
-
-- `firstArgumentEnhanced` 存在 `firstArgument` 属性时，是 `queryProgress(undefined)`
-- `firstArgumentEnhanced` 不存在 `firstArgument` 属性时，是 `queryProgress()`
-
-本块 api 设计思考过程见
-
-- [rfc1-async-data-update](./docs/rfc1-async-data-update.md)
+上面例子中，`queryUser` 等价于 `debounce(fn, 500)`。可以使用任意你喜欢的 `debounce` 函数
 
-其它
+> `fn` 是 `useAsyncData` 内部对 `getUserApi` 做的封装。`setup` 返回值为函数类型时，会成为最终返回的 `queryUser`，否则，`queryUser` === `fn`
 
-- `getData` 总是返回最新的数据
-- `setData` 不保证设置成功（比如发生了乱序响应的情况）
-- 接上，`setData` 支持处理乱序响应，一旦有新的调用触发 `setData`，旧调用的 `setData` 操作会被忽略
+## API
 
-## 理念
+### 响应
 
-在“干净架构”里，函数拆分的原则是：一个函数应该做且只做一件事
+| 属性                     | 描述                            | 类型             | 默认值    |
+| ------------------------ | ------------------------------- | ---------------- | --------- |
+| {name}                   | 异步函数的返回数据              | any \\ undefined | undefined |
+| query{Name}Loading       | 异步函数执行时的加载状态        | boolean          | false     |
+| query{Name}Arguments     | 异步函数执行时的传入的参数列表  | any[] \\ []      | []        |
+| query{Name}ArgumentFirst | query{Name}Arguments 的首个参数 | any \\ undefined | undefined |
+| query{Name}Error         | 异步函数执行时的异常            | any \\ undefined | undefined |
+| {name}Expired            | {name} 数据是否过期             | any \\ undefined | undefined |
 
-- 对于传入 `useAsyncData` 的函数 `fn` 而言，唯一需要关注的就是如何设置 `data` 的值
-  - 对于在 `data` 值初始化后需要干的其它事情，可以在 `useAsyncData` **外部** 通过 vue 的 watch data 去触发
-- 对于 `useAsyncData` 整体而言，我们将与 `data` 值相关的代码都聚集在了一起
-  - loading、error、expired、arguments 等数据与 data 或 fn 紧密相关
-  - watch 设置了 fn 的调用时机，即初始化 data 的时机
+### 配置
 
-通过上面的约定，很容易写出“干净”的函数与高内聚的代码块，提高代码可读性
+| 配置名                      | 描述                                                  | 类型                                                    | 默认值    |
+| --------------------------- | ----------------------------------------------------- | ------------------------------------------------------- | --------- |
+| immediate                   | 是否立即执行                                          | boolean                                                 | false     |
+| watch                       | 传入 vue watch 的侦听数据源，发生变动时执行 `handler` | 与 vue WatchSource 一致                                 | -         |
+| watchOptions                | 传入 vue watch 的配置项                               | 支持全部 vue WatchOptions，另有 `handlerCreator` 配置项 | -         |
+| watchOptions.handlerCreator | 自定义传入 `watch` 的 `handler`                       | `(fn: Fn) => WatchCallback`                             | -         |
+| initialData                 | data 的初始值                                         | any                                                     | undefined |
+| shallow                     | 是否使用 `shallowRef` 保存 data，默认使用 `ref`       | boolean                                                 | false     |
+| enhanceFirstArgument        | 是否强化首个入参                                      | boolean                                                 | false     |
+| setup                       | 转换函数或执行其它初始化操作                          | `(fn: Fn) => ((...args: any) => any) \| void`           | -         |
 

package/dist/vue-asyncx.d.ts

@@ -50,6 +50,7 @@ declare type UseAsyncOptions<Fn extends (...args: any) => any> = {
     watch?: WatchSource;
     watchOptions?: UseAsyncWatchOptions<Fn>;
     immediate?: boolean;
+    setup?: (fn: Fn) => ((...args: any) => any) | void;
 };
 
 declare type UseAsyncResult<Fn extends (...args: any) => any, Name extends string> = {

package/dist/vue-asyncx.js

@@ -1,150 +1,191 @@
-var b = Object.defineProperty, x = Object.defineProperties;
-var N = Object.getOwnPropertyDescriptors;
-var w = Object.getOwnPropertySymbols;
-var $ = Object.prototype.hasOwnProperty, D = Object.prototype.propertyIsEnumerable;
-var g = (e, n, t) => n in e ? b(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, C = (e, n) => {
-  for (var t in n || (n = {}))
-    $.call(n, t) && g(e, t, n[t]);
-  if (w)
-    for (var t of w(n))
-      D.call(n, t) && g(e, t, n[t]);
+var G = Object.defineProperty, L = Object.defineProperties;
+var P = Object.getOwnPropertyDescriptors;
+var F = Object.getOwnPropertySymbols;
+var O = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var H = (e, t, r) => t in e ? G(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, T = (e, t) => {
+  for (var r in t || (t = {}))
+    O.call(t, r) && H(e, r, t[r]);
+  if (F)
+    for (var r of F(t))
+      b.call(t, r) && H(e, r, t[r]);
   return e;
-}, U = (e, n) => x(e, N(n));
-var T = (e, n) => {
-  var t = {};
-  for (var o in e)
-    $.call(e, o) && n.indexOf(o) < 0 && (t[o] = e[o]);
-  if (e != null && w)
-    for (var o of w(e))
-      n.indexOf(o) < 0 && D.call(e, o) && (t[o] = e[o]);
-  return t;
+}, x = (e, t) => L(e, P(t));
+var $ = (e, t) => {
+  var r = {};
+  for (var n in e)
+    O.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && F)
+    for (var n of F(e))
+      t.indexOf(n) < 0 && b.call(e, n) && (r[n] = e[n]);
+  return r;
 };
-import { ref as F, computed as H, watch as R, shallowRef as j } from "vue";
-function G(...e) {
-  var E;
+import { ref as E, computed as l, watch as U, shallowRef as C } from "vue";
+function q(e) {
+  if (!e) return "";
+  const t = e[0], r = e.slice(1);
+  return t.toUpperCase() + r;
+}
+function N() {
+  const e = E({
+    // 发起的调用
+    track: 0,
+    // 更新的调用
+    progress: 0,
+    // 完成的调用，包含报错情况
+    finished: 0,
+    // 完成（正常）的调用，不含报错情况
+    ok: 0
+  });
+  function t() {
+    const r = e.value, n = ++r.track;
+    return {
+      progress() {
+        r.progress >= n || (r.progress = n);
+      },
+      finish(u = !1) {
+        r.finished >= n || (r.finished = n, u || (r.ok = n));
+      },
+      expired(u) {
+        return u ? u === "progress" ? r.progress > n || r.finished >= n : u === "result:ok" ? r.progress > n || r.ok > n : r.progress > n || r.finished > n : r.track > n;
+      }
+    };
+  }
+  return t.tracking = l(() => e.value.track > 0), t.latest = {
+    // 已完成
+    finished: l(() => e.value.track === e.value.finished),
+    // 已成功
+    ok: l(() => e.value.track === e.value.ok)
+  }, t.has = {
+    // 存在完成
+    finished: l(() => e.value.finished > 0),
+    // 存在成功
+    ok: l(() => e.value.ok > 0),
+    // 存在更新
+    progress: l(() => e.value.progress > 0)
+  }, t;
+}
+function z(e, t) {
+  if (typeof t != "function") return e;
+  try {
+    const r = t(e);
+    return typeof r == "function" ? r : e;
+  } catch (r) {
+    return e;
+  }
+}
+function I(...e) {
+  var h;
   if (!Array.isArray(e) || !e.length) throw TypeError("参数错误：未传递");
-  const { name: n, fn: t, options: o } = typeof e[0] == "function" ? { name: "method", fn: e[0], options: e[1] } : { name: e[0] || "method", fn: e[1], options: e[2] };
-  if (typeof n != "string") throw TypeError("参数错误：name");
-  if (typeof t != "function") throw TypeError("参数错误：fn");
-  const p = F(!1), l = F(), _ = H(() => {
-    var f;
-    return (f = l.value) == null ? void 0 : f[0];
-  }), m = F(), s = { called: 0, finished: 0 };
-  function h(...f) {
-    const d = ++s.called, A = (c) => {
-      m.value = void 0, p.value = !0, l.value = c;
-    }, u = (c, { scene: a, sn: r }) => {
-      r > s.finished && (s.finished = r), s.called === s.finished && (a === "error" && (m.value = c), p.value = !1, l.value = void 0);
+  const { name: t, fn: r, options: n } = typeof e[0] == "function" ? { name: "method", fn: e[0], options: e[1] } : { name: e[0] || "method", fn: e[1], options: e[2] };
+  if (typeof t != "string") throw TypeError("参数错误：name");
+  if (typeof r != "function") throw TypeError("参数错误：fn");
+  const u = E(!1), p = E(), _ = l(() => {
+    var a;
+    return (a = p.value) == null ? void 0 : a[0];
+  }), k = E(), y = N();
+  function v(...a) {
+    const d = y(), A = (c) => {
+      k.value = void 0, u.value = !0, p.value = c;
+    }, f = (c, { scene: s }) => {
+      d.finish(s === "error"), !d.expired() && (s === "error" && (k.value = c), u.value = !1, p.value = void 0);
     };
-    A(f);
+    A(a);
     try {
-      const c = t(...f);
+      const c = r(...a);
       return c instanceof Promise ? c.then(
-        () => u(void 0, { scene: "normal", sn: d }),
-        (a) => u(a, { scene: "error", sn: d })
-      ) : u(void 0, { scene: "normal", sn: d }), c;
+        () => f(void 0, { scene: "normal" }),
+        (s) => f(s, { scene: "error" })
+      ) : f(void 0, { scene: "normal" }), c;
     } catch (c) {
-      throw u(c, { scene: "error", sn: d }), c;
+      throw f(c, { scene: "error" }), c;
     }
   }
-  if (o) {
-    const f = () => {
-    }, y = Object.assign(
+  const m = z(v, n == null ? void 0 : n.setup);
+  if (n) {
+    const a = () => {
+    }, w = Object.assign(
       {},
-      "immediate" in o ? { immediate: o.immediate } : {},
-      (E = o.watchOptions) != null ? E : {}
-    ), { handlerCreator: d } = y, A = T(y, ["handlerCreator"]), { watch: u } = o, a = (() => {
-      const r = () => h();
-      if (typeof d != "function") return r;
+      "immediate" in n ? { immediate: n.immediate } : {},
+      (h = n.watchOptions) != null ? h : {}
+    ), { handlerCreator: d } = w, A = $(w, ["handlerCreator"]), { watch: f } = n, s = (() => {
+      const i = () => m();
+      if (typeof d != "function") return i;
       try {
-        const i = d(h);
-        return typeof i == "function" ? i : r;
-      } catch (i) {
-        return r;
+        const o = d(m);
+        return typeof o == "function" ? o : i;
+      } catch (o) {
+        return i;
       }
     })();
-    R(u != null ? u : f, a, A);
+    U(f != null ? f : a, s, A);
   }
   return {
-    [n]: h,
-    [`${n}Loading`]: p,
-    [`${n}Arguments`]: l,
-    [`${n}ArgumentFirst`]: _,
-    [`${n}Error`]: m
+    [t]: m,
+    [`${t}Loading`]: u,
+    [`${t}Arguments`]: p,
+    [`${t}ArgumentFirst`]: _,
+    [`${t}Error`]: k
   };
 }
-function P(e) {
-  if (!e) return "";
-  const n = e[0], t = e.slice(1);
-  return n.toUpperCase() + t;
-}
-const L = "__va_fae";
-function k(...e) {
+const R = "__va_fae";
+function Q(...e) {
   if (!Array.isArray(e) || !e.length) throw TypeError("参数错误：未传递");
-  const { name: n, fn: t, options: o } = typeof e[0] == "function" ? { name: "data", fn: e[0], options: e[1] } : { name: e[0] || "data", fn: e[1], options: e[2] };
-  if (typeof n != "string") throw TypeError("参数错误：name");
-  if (typeof t != "function") throw TypeError("参数错误：fn");
-  const c = o || {}, { enhanceFirstArgument: p, initialData: l, shallow: _ } = c, m = T(c, ["enhanceFirstArgument", "initialData", "shallow"]), s = F({
-    // 调用序号（即：fn 第 called 次调用）
-    called: 0,
-    // 完成序号（即：fn 第 finished 次调用完成）
-    finished: 0,
-    // 数据被更新的调用序号（即：data 数据由第 dataUpdateByCalled 次调用更新）
-    dataUpdateByCalled: 0,
-    // 数据完成更新序号（即：data 数据由第 dataUpdateByFinished 次调用完成后更新）
-    dataUpdateByFinished: 0
-  }), h = _ ? j(l) : F(l), E = H(() => !(s.value.dataUpdateByFinished >= s.value.finished || s.value.dataUpdateByCalled > s.value.finished));
-  function y(a, { sn: r, scene: i }) {
-    r < s.value.dataUpdateByCalled || (h.value = a, s.value.dataUpdateByCalled = r, i === "finish" && (s.value.dataUpdateByFinished = r));
+  const { name: t, fn: r, options: n } = typeof e[0] == "function" ? { name: "data", fn: e[0], options: e[1] } : { name: e[0] || "data", fn: e[1], options: e[2] };
+  if (typeof t != "string") throw TypeError("参数错误：name");
+  if (typeof r != "function") throw TypeError("参数错误：fn");
+  const c = n || {}, { enhanceFirstArgument: u, initialData: p, shallow: _ } = c, k = $(c, ["enhanceFirstArgument", "initialData", "shallow"]), y = _ ? C(p) : E(p), v = C();
+  function m(s, { track: i, scene: o }) {
+    o === "update" && i.progress(), !(o === "finish" && i.expired("result:ok")) && (o === "update" && i.expired("progress") || (y.value = s, v.value = i));
   }
-  function f(a, { scene: r, sn: i }) {
-    r === "normal" && y(a, { sn: i, scene: "finish" }), i > s.value.finished && (s.value.finished = i);
+  function h(s, { scene: i, track: o }) {
+    o.finish(i === "error"), i === "normal" && m(s, { track: o, scene: "finish" });
   }
-  function d(a, {
-    enhanceFirstArgument: r,
-    sn: i
+  function w(s, {
+    enhanceFirstArgument: i,
+    track: o
   }) {
-    if (!r) return a;
-    const [v, ...O] = a;
-    return [U(C({
-      [L]: !0
-    }, a.length ? { firstArgument: v } : {}), {
-      getData: () => h.value,
-      updateData: (B) => (y(B, { sn: i, scene: "update" }), B)
-    }), ...O];
+    if (!i) return s;
+    const [g, ...j] = s;
+    return [x(T({
+      [R]: !0
+    }, s.length ? { firstArgument: g } : {}), {
+      getData: () => y.value,
+      updateData: (D) => (m(D, { track: o, scene: "update" }), D)
+    }), ...j];
   }
-  function A(...a) {
-    const r = ++s.value.called;
-    a = d(a, { enhanceFirstArgument: p, sn: r });
+  const a = N();
+  function d(...s) {
+    const i = a();
+    s = w(s, { enhanceFirstArgument: u, track: i });
     try {
-      const i = t(...a);
-      return i instanceof Promise ? i.then(
+      const o = r(...s);
+      return o instanceof Promise ? o.then(
         // promise 正常结束
-        (v) => f(v, { scene: "normal", sn: r }),
+        (g) => h(g, { scene: "normal", track: i }),
         // promise 出现拒绝
-        (v) => f(v, { scene: "error", sn: r })
-      ) : f(i, { scene: "normal", sn: r }), i;
-    } catch (i) {
-      throw f(i, { scene: "error", sn: r }), i;
+        (g) => h(g, { scene: "error", track: i })
+      ) : h(o, { scene: "normal", track: i }), o;
+    } catch (o) {
+      throw h(o, { scene: "error", track: i }), o;
     }
   }
-  const u = G(`query${P(n)}`, A, m);
-  return U(C({}, u), {
-    [n]: h,
-    [`${n}Expired`]: E
+  const A = I(`query${q(t)}`, d, k), f = l(() => a.tracking.value ? v.value ? v.value.expired("result") : a.has.finished.value : !1);
+  return x(T({}, A), {
+    [t]: y,
+    [`${t}Expired`]: f
   });
 }
-function J(e, n) {
-  if (!q(e)) throw Error("请配置 options.enhanceFirstArgument = true");
-  const t = e;
-  return arguments.length === 2 && t.firstArgument === void 0 ? U(C({}, t), { firstArgument: n }) : t;
+function S(e, t) {
+  if (!M(e)) throw Error("请配置 options.enhanceFirstArgument = true");
+  const r = e;
+  return arguments.length === 2 && r.firstArgument === void 0 ? x(T({}, r), { firstArgument: t }) : r;
 }
-function q(e) {
-  return typeof e == "object" && !!e && L in e;
+function M(e) {
+  return typeof e == "object" && !!e && R in e;
 }
 export {
-  J as unFirstArgumentEnhanced,
-  G as useAsync,
-  k as useAsyncData,
-  G as useAsyncFunction
+  S as unFirstArgumentEnhanced,
+  I as useAsync,
+  Q as useAsyncData,
+  I as useAsyncFunction
 };

package/dist/vue-asyncx.umd.cjs

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.VueAsyncx={},n.Vue))})(this,function(n,e){"use strict";var q=Object.defineProperty,x=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var U=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var O=(n,e,o)=>e in n?q(n,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[e]=o,_=(n,e)=>{for(var o in e||(e={}))j.call(e,o)&&O(n,o,e[o]);if(U)for(var o of U(e))H.call(e,o)&&O(n,o,e[o]);return n},g=(n,e)=>x(n,G(e));var D=(n,e)=>{var o={};for(var d in n)j.call(n,d)&&e.indexOf(d)<0&&(o[d]=n[d]);if(n!=null&&U)for(var d of U(n))e.indexOf(d)<0&&H.call(n,d)&&(o[d]=n[d]);return o};function o(...t){var C;if(!Array.isArray(t)||!t.length)throw TypeError("参数错误：未传递");const{name:f,fn:l,options:m}=typeof t[0]=="function"?{name:"method",fn:t[0],options:t[1]}:{name:t[0]||"method",fn:t[1],options:t[2]};if(typeof f!="string")throw TypeError("参数错误：name");if(typeof l!="function")throw TypeError("参数错误：fn");const v=e.ref(!1),y=e.ref(),B=e.computed(()=>{var u;return(u=y.value)==null?void 0:u[0]}),F=e.ref(),s={called:0,finished:0};function A(...u){const p=++s.called,w=c=>{F.value=void 0,v.value=!0,y.value=c},h=(c,{scene:a,sn:r})=>{r>s.finished&&(s.finished=r),s.called===s.finished&&(a==="error"&&(F.value=c),v.value=!1,y.value=void 0)};w(u);try{const c=l(...u);return c instanceof Promise?c.then(()=>h(void 0,{scene:"normal",sn:p}),a=>h(a,{scene:"error",sn:p})):h(void 0,{scene:"normal",sn:p}),c}catch(c){throw h(c,{scene:"error",sn:p}),c}}if(m){const u=()=>{},E=Object.assign({},"immediate"in m?{immediate:m.immediate}:{},(C=m.watchOptions)!=null?C:{}),{handlerCreator:p}=E,w=D(E,["handlerCreator"]),{watch:h}=m,a=(()=>{const r=()=>A();if(typeof p!="function")return r;try{const i=p(A);return typeof i=="function"?i:r}catch(i){return r}})();e.watch(h!=null?h:u,a,w)}return{[f]:A,[`${f}Loading`]:v,[`${f}Arguments`]:y,[`${f}ArgumentFirst`]:B,[`${f}Error`]:F}}function d(t){if(!t)return"";const f=t[0],l=t.slice(1);return f.toUpperCase()+l}const $="__va_fae";function L(...t){if(!Array.isArray(t)||!t.length)throw TypeError("参数错误：未传递");const{name:f,fn:l,options:m}=typeof t[0]=="function"?{name:"data",fn:t[0],options:t[1]}:{name:t[0]||"data",fn:t[1],options:t[2]};if(typeof f!="string")throw TypeError("参数错误：name");if(typeof l!="function")throw TypeError("参数错误：fn");const c=m||{},{enhanceFirstArgument:v,initialData:y,shallow:B}=c,F=D(c,["enhanceFirstArgument","initialData","shallow"]),s=e.ref({called:0,finished:0,dataUpdateByCalled:0,dataUpdateByFinished:0}),A=B?e.shallowRef(y):e.ref(y),C=e.computed(()=>!(s.value.dataUpdateByFinished>=s.value.finished||s.value.dataUpdateByCalled>s.value.finished));function E(a,{sn:r,scene:i}){r<s.value.dataUpdateByCalled||(A.value=a,s.value.dataUpdateByCalled=r,i==="finish"&&(s.value.dataUpdateByFinished=r))}function u(a,{scene:r,sn:i}){r==="normal"&&E(a,{sn:i,scene:"finish"}),i>s.value.finished&&(s.value.finished=i)}function p(a,{enhanceFirstArgument:r,sn:i}){if(!r)return a;const[T,...R]=a;return[g(_({[$]:!0},a.length?{firstArgument:T}:{}),{getData:()=>A.value,updateData:b=>(E(b,{sn:i,scene:"update"}),b)}),...R]}function w(...a){const r=++s.value.called;a=p(a,{enhanceFirstArgument:v,sn:r});try{const i=l(...a);return i instanceof Promise?i.then(T=>u(T,{scene:"normal",sn:r}),T=>u(T,{scene:"error",sn:r})):u(i,{scene:"normal",sn:r}),i}catch(i){throw u(i,{scene:"error",sn:r}),i}}const h=o(`query${d(f)}`,w,F);return g(_({},h),{[f]:A,[`${f}Expired`]:C})}function N(t,f){if(!P(t))throw Error("请配置 options.enhanceFirstArgument = true");const l=t;return arguments.length===2&&l.firstArgument===void 0?g(_({},l),{firstArgument:f}):l}function P(t){return typeof t=="object"&&!!t&&$ in t}n.unFirstArgumentEnhanced=N,n.useAsync=o,n.useAsyncData=L,n.useAsyncFunction=o,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r.VueAsyncx={},r.Vue))})(this,function(r,t){"use strict";var S=Object.defineProperty,U=Object.defineProperties;var V=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var R=(r,t,f)=>t in r?S(r,t,{enumerable:!0,configurable:!0,writable:!0,value:f}):r[t]=f,_=(r,t)=>{for(var f in t||(t={}))C.call(t,f)&&R(r,f,t[f]);if(x)for(var f of x(t))N.call(t,f)&&R(r,f,t[f]);return r},D=(r,t)=>U(r,V(t));var O=(r,t)=>{var f={};for(var d in r)C.call(r,d)&&t.indexOf(d)<0&&(f[d]=r[d]);if(r!=null&&x)for(var d of x(r))t.indexOf(d)<0&&N.call(r,d)&&(f[d]=r[d]);return f};function f(e){if(!e)return"";const o=e[0],n=e.slice(1);return o.toUpperCase()+n}function d(){const e=t.ref({track:0,progress:0,finished:0,ok:0});function o(){const n=e.value,i=++n.track;return{progress(){n.progress>=i||(n.progress=i)},finish(p=!1){n.finished>=i||(n.finished=i,p||(n.ok=i))},expired(p){return p?p==="progress"?n.progress>i||n.finished>=i:p==="result:ok"?n.progress>i||n.ok>i:n.progress>i||n.finished>i:n.track>i}}}return o.tracking=t.computed(()=>e.value.track>0),o.latest={finished:t.computed(()=>e.value.track===e.value.finished),ok:t.computed(()=>e.value.track===e.value.ok)},o.has={finished:t.computed(()=>e.value.finished>0),ok:t.computed(()=>e.value.ok>0),progress:t.computed(()=>e.value.progress>0)},o}function P(e,o){if(typeof o!="function")return e;try{const n=o(e);return typeof n=="function"?n:e}catch(n){return e}}function $(...e){var y;if(!Array.isArray(e)||!e.length)throw TypeError("参数错误：未传递");const{name:o,fn:n,options:i}=typeof e[0]=="function"?{name:"method",fn:e[0],options:e[1]}:{name:e[0]||"method",fn:e[1],options:e[2]};if(typeof o!="string")throw TypeError("参数错误：name");if(typeof n!="function")throw TypeError("参数错误：fn");const p=t.ref(!1),m=t.ref(),b=t.computed(()=>{var l;return(l=m.value)==null?void 0:l[0]}),g=t.ref(),E=d();function w(...l){const k=E(),v=a=>{g.value=void 0,p.value=!0,m.value=a},h=(a,{scene:u})=>{k.finish(u==="error"),!k.expired()&&(u==="error"&&(g.value=a),p.value=!1,m.value=void 0)};v(l);try{const a=n(...l);return a instanceof Promise?a.then(()=>h(void 0,{scene:"normal"}),u=>h(u,{scene:"error"})):h(void 0,{scene:"normal"}),a}catch(a){throw h(a,{scene:"error"}),a}}const A=P(w,i==null?void 0:i.setup);if(i){const l=()=>{},T=Object.assign({},"immediate"in i?{immediate:i.immediate}:{},(y=i.watchOptions)!=null?y:{}),{handlerCreator:k}=T,v=O(T,["handlerCreator"]),{watch:h}=i,u=(()=>{const c=()=>A();if(typeof k!="function")return c;try{const s=k(A);return typeof s=="function"?s:c}catch(s){return c}})();t.watch(h!=null?h:l,u,v)}return{[o]:A,[`${o}Loading`]:p,[`${o}Arguments`]:m,[`${o}ArgumentFirst`]:b,[`${o}Error`]:g}}const j="__va_fae";function q(...e){if(!Array.isArray(e)||!e.length)throw TypeError("参数错误：未传递");const{name:o,fn:n,options:i}=typeof e[0]=="function"?{name:"data",fn:e[0],options:e[1]}:{name:e[0]||"data",fn:e[1],options:e[2]};if(typeof o!="string")throw TypeError("参数错误：name");if(typeof n!="function")throw TypeError("参数错误：fn");const a=i||{},{enhanceFirstArgument:p,initialData:m,shallow:b}=a,g=O(a,["enhanceFirstArgument","initialData","shallow"]),E=b?t.shallowRef(m):t.ref(m),w=t.shallowRef();function A(u,{track:c,scene:s}){s==="update"&&c.progress(),!(s==="finish"&&c.expired("result:ok"))&&(s==="update"&&c.expired("progress")||(E.value=u,w.value=c))}function y(u,{scene:c,track:s}){s.finish(c==="error"),c==="normal"&&A(u,{track:s,scene:"finish"})}function T(u,{enhanceFirstArgument:c,track:s}){if(!c)return u;const[F,...M]=u;return[D(_({[j]:!0},u.length?{firstArgument:F}:{}),{getData:()=>E.value,updateData:H=>(A(H,{track:s,scene:"update"}),H)}),...M]}const l=d();function k(...u){const c=l();u=T(u,{enhanceFirstArgument:p,track:c});try{const s=n(...u);return s instanceof Promise?s.then(F=>y(F,{scene:"normal",track:c}),F=>y(F,{scene:"error",track:c})):y(s,{scene:"normal",track:c}),s}catch(s){throw y(s,{scene:"error",track:c}),s}}const v=$(`query${f(o)}`,k,g),h=t.computed(()=>l.tracking.value?w.value?w.value.expired("result"):l.has.finished.value:!1);return D(_({},v),{[o]:E,[`${o}Expired`]:h})}function G(e,o){if(!L(e))throw Error("请配置 options.enhanceFirstArgument = true");const n=e;return arguments.length===2&&n.firstArgument===void 0?D(_({},n),{firstArgument:o}):n}function L(e){return typeof e=="object"&&!!e&&j in e}r.unFirstArgumentEnhanced=G,r.useAsync=$,r.useAsyncData=q,r.useAsyncFunction=$,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-asyncx",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "",
   "type": "module",
   "types": "dist/vue-asyncx.d.ts",
@@ -20,7 +20,8 @@
     "utils",
     "async",
     "vueuse",
-    "hooks"
+    "hooks",
+    "ahooks"
   ],
   "author": "Xu Yiming",
   "license": "MIT",
@@ -31,6 +32,7 @@
   "devDependencies": {
     "@types/node": "^20.14.11",
     "@vitest/coverage-v8": "^2.0.4",
+    "es-toolkit": "^1.42.0",
     "jsdom": "^24.1.1",
     "typescript": "^5.5.4",
     "vite": "^5.3.4",