Vue3Request

Appearance

参数管理 ​

useRequest 提供了完善的参数管理机制，让你能够灵活地处理请求参数，并在整个请求生命周期中追踪参数状态。

useRequest 返回的 params 会自动记录当次调用 service 的参数数组。例如：

  • 调用 run(1, 2, 3) → params 值为 [1, 2, 3]
  • 调用 run('hello', { id: 1 }) → params 值为 ['hello', { id: 1 }]

在所有生命周期回调中，都会提供 params 参数。例如：

  • onBefore: (params) => {}
  • onSuccess: (data, params) => {}
  • onError: (error, params) => {}
  • onFinally: (params, data, error) => {}

参数设置 ​

useRequest 提供了多种参数设置方式，适应不同的业务场景。

🎯 默认参数 + 动态传参（推荐） ​

这是最灵活的参数管理方式，结合了默认参数options.defaultParams和动态传参的优势：

  • 通过 run(newParams) 可随时传入新参数
  • 所有参数变化都会被 params 准确记录
  • 享受完整的 TypeScript 类型提示

🏭 工厂函数模式 ​

通过工厂函数包装 service，适用于需要对参数进行预处理的场景：

  • 需要对参数进行预处理或验证
  • 多个地方使用相同的参数处理逻辑

❌ 闭包模式（不推荐） ​

将参数封装在闭包中，存在多个严重缺陷，强烈不推荐使用：

严重缺陷分析：

  1. ❌ 参数记录失效

    ts
    // params 始终为空数组，无法追踪真实参数
console.log(params.value); // 输出: []

  2. ❌ 失去动态传参能力

    ts
    run(); // 只能这样调用，无法传入新参数
run(newForm); // ❌ 传入的参数会被忽略

  3. ❌ 测试困难

    ts
    // 测试时无法 mock 参数，依赖外部变量
const mockForm = { name: "test", age: 25 };
run(mockForm); // ❌ 无效，仍使用闭包中的 form

  4. ❌ 副作用难以控制

    ts
    // form 的变化不会触发重新请求，但会影响请求结果
form.name = "new name"; // 静默影响下次请求

  5. ❌ TypeScript 类型提示缺失

    ts
    run(/* 这里无法获得类型提示 */);

Options ​

参数说明类型默认值
defaultParams默认参数数组，在自动模式下会作为初始参数传递给 ServiceP[]

Result ​

参数说明类型
params当次执行的 Service 的参数数组。比如你触发了 run(1, 2, 3)，则 params 等于 [1, 2, 3]Ref<P>

贡献者 ☘️ ​

Flame-00

Flame-00

Creator