自定义插件

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

插件结构

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

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

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

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

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

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) => {
        // 请求前执行
      },
      onRequest: (service) => {
        // 请求时执行，可以修改 service
        return service;
      },
      onSuccess: (data, params) => {
        // 请求成功时执行
      },
      onError: (error, params) => {
        // 请求失败时执行
      },
      onFinally: (params, data, error) => {
        // 请求完成时执行（无论成功或失败）
      },
      onCancel: () => {
        // 请求取消时执行
      },
      onMutate: (data) => {
        // 数据变更时执行
      },
    };
  }
);
const { data, loading } = useRequest(
  service,
  {
    level: "1", 
  },
  [customPlugin] 
);

实战示例

请求日志插件

TIP

打开控制台查看日志打印

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

贡献者 ☘️

Flame-00

Creator

自定义插件 ​

插件结构 ​

实战示例 ​

请求日志插件 ​