@pluve/use-request-vue

Appearance

类型定义 ​

核心类型 ​

Service<TData, TParams> ​

请求服务函数类型

typescript
type Service<TData, TParams extends any[]> = (...args: TParams) => Promise<TData>;

Options<TData, TParams> ​

useRequest 的配置项类型

typescript
interface Options<TData, TParams extends any[]> {
  // 基本配置
  manual?: boolean;
  initialData?: TData;
  defaultParams?: TParams;

  // 生命周期
  onBefore?: (params: TParams) => void;
  onSuccess?: (data: TData, params: TParams) => void;
  onError?: (e: Error, params: TParams) => void;
  onFinally?: (params: TParams, data?: TData, e?: Error) => void;

  // 插件相关配置
  throttleInterval?: number;
  debounceInterval?: number;
  pollingInterval?: number;
  cacheKey?: string;
  cacheTime?: number;
  staleTime?: number;
  retryCount?: number;
}

Result<TData, TParams> ​

useRequest 的返回值类型

typescript
interface Result<TData, TParams extends any[]> {
  // 请求状  loading: Ref<boolean>;
  data: Ref<TData | undefined>;
  error: Ref<Error | undefined>;

  // 请求方法
  run: (...args: TParams) => void;
  runAsync: (...args: TParams) => Promise<TData>;
  cancel: () => void;

  // 插件方法
  [key: string]: any;
}

Plugin<TData, TParams> ​

插件类型

typescript
interface Plugin<TData, TParams extends any[]> {
  (
    fetchInstance: Fetch<TData, TParams>,
    options: Options<TData, TParams>,
  ): {
    onBefore?: (params: TParams) => void;
    onSuccess?: (data: TData, params: TParams) => void;
    onError?: (e: Error, params: TParams) => void;
    onFinally?: (params: TParams, data?: TData, e?: Error) => void;
    onCancel?: () => void;
    [key: string]: any;
  };
}

缓存 ​

typescript
interface CachePluginOptions<TData, TParams> {
  cacheKey?: string;
  staleTime?: number;
}

防抖 ​

typescript
interface DebouncePluginOptions {
  debounceInterval?: number;
}

轮询 ​

typescript
interface PollingPluginOptions {
  pollingInterval?: number;
  pollingWhenHidden?: boolean;
}

重试 ​

typescript
interface RetryPluginOptions {
  retryCount?: number;
  retryInterval?: number | ((retryCount: number) => number);
}

节流 ​

typescript
interface ThrottlePluginOptions {
  throttleInterval?: number;
}

工具类型 ​

Ref<T> ​

Vue 的响应式引用类型

typescript
type Ref<T> = import('vue').Ref<T>;

CachedData<TData, TParams> ​

缓存数据类型

typescript
interface CachedData<TData, TParams> {
  data: TData;
  params: TParams;
  time: number;
}

使用示例 ​

自定义插 ​

typescript
import { Plugin } from '@pluve/use-request-vue';

const useCustomPlugin: Plugin<any, any> = (fetchInstance, options) => {
  return {
    onBefore: (params) => {
      console.log('请求开, params);
    },
    onSuccess: (data, params) => {
      console.log('请求成功', data, params);
    },
    onError: (error, params) => {
      console.error('请求失败', error, params);
    },
    onFinally: (params, data, error) => {
      console.log('请求结束', { params, data, error });
    },
    onCancel: () => {
      console.log('请求取消');
    },
  };
};

export default useCustomPlugin;

类型断言 ​

typescript
import  useRequest  from '@pluve/use-request-vue';

interface User {
  id: number;
  name: string;
  email: string;
}

// 指定请求参数和响应数据类const { data, run } = useRequest<User, [string, number]>(
  (name: string, age: number) =>
    fetch(`/api/users?name=${name}&age=${age}`)
      .then(res => res.json() as Promise<User>)
);

// 调用时会有类型检run('John', 30);