Vue3Request

Appearance

基础用法 ​

掌握 Vue3Request 的核心功能，开启高效异步数据管理之旅

默认请求 ​

useRequest 是一个强大的异步数据管理 Hook，为你的 Vue3 应用提供完整的请求状态管理解决方案。

只需传入一个异步函数作为第一个参数，useRequest 就会在组件初始化时自动执行该函数，并智能管理整个请求生命周期中的 data、error、loading 等状态，让你专注于业务逻辑而非状态管理的繁琐细节。

ts
const { data, error, loading } = useRequest(service);
默认请求放在onMounted回调里执行，想在 setup 中直接执行，请使用手动触发
ts
// 类似这样的做法
onMounted(() => {
  service();
});

手动触发 ​

在某些业务场景中，你可能希望精确控制请求的执行时机。通过设置 options.manual = true，useRequest 将不会在组件初始化时自动执行，而是等待你主动调用 run 或 runAsync 方法。

ts
const { loading, run, runAsync } = useRequest(service, {
  manual: true, 
});

useRequest 提供了两种手动执行方式，以适应不同的使用场景：

🔸 run 方法

  • 特点：同步调用，内置异常处理
  • 适用场景：希望统一处理错误的业务场景
  • 优势：异常会被自动捕获，你可以通过 options.onError 回调统一处理错误逻辑

🔸 runAsync 方法

  • 特点：异步调用，返回 Promise
  • 适用场景：需要自定义异常处理的复杂业务逻辑
  • 优势：提供更灵活的错误处理方式，支持 async/await 语法
ts
// 使用 runAsync 的典型模式
runAsync()
  .then((data) => {
    console.log("请求成功:", data);
  })
  .catch((error) => {
    console.error("请求失败:", error);
  });

为了更直观地展示两种方式的区别，下面我们通过一个实际的姓名生成器示例来演示它们的用法。

run ​

在这个示例中，我们使用 run(lastName) 方法为模拟人物添加姓氏，通过 onSuccess 和 onError 回调来统一处理成功和失败的情况：

runAsync ​

在这个示例中，我们使用 runAsync(lastName) 方法实现相同的功能，但采用 Promise 的方式自行处理异常：

Result ​

参数说明类型
dataService 返回的数据Ref<D | undefined>
errorService 抛出的异常Ref<Error | undefined>
loadingService 是否正在执行Ref<boolean>
run手动执行 Service，同步执行(...params: P) => void
runAsync手动执行 Service，异步执行，返回 Promise(...params: P) => Promise<D>
params当次执行的 Service 的参数数组。比如你触发了 run(1, 2, 3)，则 params 等于 [1, 2, 3]Ref<P>
isFinishedService 是否执行完成Ref<boolean>
isAbortedService 是否中止Ref<boolean>

Options ​

参数说明类型默认值
manual是否手动触发 Service，设置为 true 时，需要主动调用 run 或 runAsync 来执行请求booleanfalse

贡献者 ☘️ ​

Flame-00

Flame-00

Creator