V3加ts上的vue-hooks-puls封装

$ npm install --save vue-hooks-plus
# or
$ yarn add vue-hooks-plus

 

/* eslint-disable @typescript-eslint/no-explicit-any */
import { Ref } from 'vue'
import { useRequest } from 'vue-hooks-plus'

declare type AxiosInstance<TData, TParams extends any[]> = (...args: TParams) => Promise<TData>

export type DataLoaderOptions<TData, TParams extends any[]> = {
  getDataFn: AxiosInstance<TData, TParams> // 数据请求函数
  autoLoadOnMounted: true | false //mounted时是否自动加载数据
  errorRetryInterval?: number //错误重载时间 小于等于0代表报错不重加载数据
  closeLoop?: false | true // 关闭轮询 为true时 autoReloadInterval loopTimeFlag 设定失效
  autoReloadInterval?: Ref<number> | number //轮询时间 大于0代表需要自动刷新的时间
  loopTimeFlag?: string // 自定义轮询时间标识  设定后，轮询时间的定义会去取
  onBefore?: (params: TParams) => void // 请求执行前回调函数
  formatResult?: (data?: TData) => any // 数据处理函数
  onSuccess?: (data: TData, params: TParams) => void // 请求成功回调函数
  onError?: (e: Error, params: TParams) => void // 请求异常处理函数
  onFinally?: (params: TParams, data?: TData, e?: Error) => void // 请求最终回调函数
}

/**
 * RESULT:
 *  data	service 返回的数据	Ref<TData> | undefined
    error	service 抛出的异常	Ref<Error> | undefined
    loading	service 是否正在执行	Ref<boolean>
    params	当次执行的 service 的参数数组。比如你触发了 run(1, 2, 3)，则 params 等于 [1, 2, 3]	Ref<TParams> | []
    formatResult	格式化请求结果	(response: TData) => any
    run	手动触发 service 执行，参数会传递给 service 异常自动处理，通过 onError 反馈(...params: TParams) => void
    runAsync	与 run 用法一致，但返回的是 Promise，需要自行处理异常。	(...params: TParams) => Promise<TData>
    refresh	使用上一次的 params，重新调用 run	() => void
    refreshAsync	使用上一次的 params，重新调用 runAsync	() => Promise<TData>
    mutate	直接修改 data	(data?: TData / ((oldData?: TData) => (TData / undefined))) => void
    cancel	取消当前正在进行的请求	() => void
 * @returns 
 */
export default function useDataLoader<TData, TParams extends any[]>(options: DataLoaderOptions<TData, TParams>) {
  return useRequest<TData, TParams, any>(options.getDataFn, {
    manual: !options.autoLoadOnMounted,
    pollingInterval: options.autoReloadInterval || 60000,
    pollingWhenHidden: true,
    pollingErrorRetryCount: -1,
    debounceWait: 200, // 防抖节流
    retryCount: 5, // 请求错误，重新请求几次
    retryInterval: options.errorRetryInterval || 3000, 几秒后重新请求
    formatResult: options.formatResult,
    onBefore: options.onBefore,
    onSuccess: options.onSuccess, // service resolve 时触发
    onError: (error, params) => {
      console.error(error) // 请求错误
    },
    onFinally: options.onFinally  // service 执行完成时触发
  })
}

import useDataLoader from '@/hooks/useDataLoader' // 引入上面的文件
import { userApi } from '@/api'

// 简单演示
const { run, data, loading } = useDataLoader({
  getDataFn: () => userApi, // 请求接口
  autoLoadOnMounted: true, // 刚进入页面刷新
  onSuccess: (data) => {
    // 处理返回值
  }
})