让异步像写诗的 Vue 3 / 2.7 组合式工具库

不重复、有语义，天然防竞态、自由可扩展

• 📚 文档：官网
• 🎮 演示：Playground

特性

• 异步样板代码减少 40%+，专注业务逻辑本身
• 关联状态自动生成并命名，代码结构自解释
• 内建竞态处理机制，避免并发请求导致的数据错乱
• 插件化 addon 架构，异步能力可组合、可扩展
• SSR 友好设计，无浏览器依赖，服务端执行安全可控
• 兼容 Vue 3 / Vue 2.7，零第三方依赖
• 完整的 TypeScript 类型设计与推导支持
• 100% 单元测试覆盖，300+ 用例保障行为稳定

安装

pnpm i vue-asyncx

快速开始

useAsyncData (异步数据管理)

需要使用异步数据 user 时，调用 useAsyncData 传入数据名和数据获取函数即可。useAsyncData 会自动处理与异步函数相关的 data, loading, arguments, error 等状态。

import { getUserApi } from './api'
import { useAsyncData } from 'vue-asyncx'

const { 
  user, 
  queryUserLoading,
  queryUser, 
} = useAsyncData('user', getUserApi) // 代码即注释：使用异步数据 user

queryUser('Mike')

更多内容，见：useAsyncData

useAsync (异步函数管理)

当不需要异步数据，只关注异步函数的执行状态时：调用 useAsync 传入函数名和异步函数即可。useAsync 会自动处理与该异步函数相关的 loading, arguments, error 等状态。

import { submitApi } from './api'
import { useAsync } from 'vue-asyncx'

const { 
  submit, 
  submitLoading,
  submitError,
} = useAsync('submit', submitApi) // 代码即注释：使用异步函数 submit

// 表单提交
action="@click="submit(formData)"

更多内容，见：useAsync

设计哲学：约定带来效率

与 useRequest 返回固定的 data、loading、error 不同，useAsyncData 将关联的函数、变量统一命名：

• user：由异步函数更新的数据 data
• queryUser：更新 user 的异步函数
• queryUserLoading：调用 queryUser 时的 loading 状态

刚接触可能有些不习惯，但这种方式带来可读性和效率的双重提升，在大型项目、多人团队中尤为明显。

代码中看到 queryUserLoading 变量，就知道它和 user 变量以及 queryUser 函数有关。

并且这一切，都可以自动提示。

更多内容，见：命名约定

高级用法示例：并行同语义操作

在一些场景中，同一个异步操作可能需要分组并行多次调用（例如列表中多个按钮触发同一操作）。

vue-asyncx 通过 withAddonGroup 插件提供支持

👉 适用于：列表操作 / 批量操作 / 多实例异步

const { 
  confirm, 
  confirmGroup 
} = useAsync('confirm', confirmApi, {
  addons: [
    withAddonGroup({
      key: (args) => args[0], // 使用第一个参数作为分组 key
    }),
  ],
})

详细内容，见：withAddonGroup

兼容性

• TS >= 5.4；可放宽至 TS >= 4.1
• 支持 Vue 3.x / 2.7