Vue3Request

Appearance

自定义插件 ​

Vue3Request 提供了强大而灵活的插件系统，允许你根据业务需求开发自定义插件，扩展 useRequest 的功能。通过插件机制，你可以在请求的各个生命周期阶段注入自定义逻辑。

插件结构 ​

一个 Vue3Request 插件本质上是一个函数，接收 requestInstance 和 options 参数，返回一个包含生命周期钩子的对象：

插件作为useRequest的第三个参数，需要传递一个数组，数组里的插件执行顺序采用洋葱模型（倒序执行）

你可以使用 Vue3Request 导出的 definePlugin 方法来定义插件，此方法具有丰富的 TS 类型提示

ts
const definePlugin: <D = any, P extends any[] = any, O = {}>(
  plugin: Plugin<D, P, O>
) => Plugin<D, P, O>;

泛型 D 是 data 的类型，即 requestInstance.state.data；泛型 P 是 params 的类型，即 requestInstance.state.params 和 options.defaultParams；泛型 O 用来扩展 options 对象的属性

详细说明请参考 API 文档 - definePlugin。

ts
import { useRequest, definePlugin } from "vue3-request";

interface IResult {
  code: number;
  msg: string;
  data: {
    name: string;
    age: number;
  };
}

const service = ({ id }: { id: number }): Promise<IResult> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        msg: "success",
        data: {
          name: "zs",
          age: 24,
        },
      });
    }, 1000);
  });
};

interface IPlugin {
  level: string;
}

const customPlugin = definePlugin<IResult, [{ id: number }], IPlugin>(
(requestInstance, options) => {
    // 插件初始化逻辑

    return {
      onBefore: (params) => {
        // 请求前执行，对应 options.onBefore
      },
      onRequest: (service) => {
        // 请求时执行，可以修改 service
        // 必须返回一个新的 service 函数
        return service;
      },
      onSuccess: (params) => {
        // 请求成功时执行，对应 options.onSuccess
        // 如需访问响应数据，使用 requestInstance.state.data
        console.log('响应数据:', requestInstance.state.data);
      },
      onError: (params) => {
        // 请求失败时执行，对应 options.onError
        // 如需访问错误信息，使用 requestInstance.state.error
        console.log('错误信息:', requestInstance.state.error);
      },
      onFinally: (params) => {
        // 请求完成时执行（无论成功或失败），对应 options.onFinally
        // 可以同时访问 data 和 error
        const { data, error } = requestInstance.state;
        if (data) {
          console.log('请求成功');
        }
        if (error) {
          console.log('请求失败');
        }
      },
      onCancel: () => {
        // 请求取消时执行，对应 cancel() 方法
      },
    };
  }
);
const { data, loading } = useRequest(
  service,
  {
    level: "1", 
  },
  [customPlugin] 
);

实战示例 ​

请求日志插件 ​

TIP

打开控制台查看日志打印

通过自定义插件，你可以将 useRequest 扩展到任何业务场景，实现高度定制化的异步数据管理解决方案。

贡献者 ☘️ ​

Flame-00

Flame-00

Creator