VueUse使用及造轮子选择对比示例详解

const {
  loading: Ref<boolean>,
  data?: Ref<TData>,
  error?: Ref<Error>,
  params: Ref<TParams || []>,
  run: (...params: TParams) => void,
  runAsync: (...params: TParams) => Promise<TData>,
  refresh: () => void,
  refreshAsync: () => Promise<TData>,
  mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
  cancel: () => void,
} = useRequest<TData, TParams>(
  service: (...args: TParams) => Promise<TData>,
  {
    manual?: boolean,
    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,
    ...高级功能，更多请见文档
  }
);

<template>
  <div>{{ data?.name ?? '-' }}</div>
  <div>{{ data?.age ?? '-' }}</div>
</template>
<script lang="ts" setup>
import { useRequest } from 'vue-hooks-plus'
import { Plugin } from '../../../types'
// 插件
const useFormatter: Plugin<
  {
    name: string
    age: number
  },
  []
> = (fetchInstance, { formatter }) => {
  return {
    onSuccess: () => {
      fetchInstance.setData(formatter(fetchInstance.state.data), 'data')
    },
  }
}
function getUsername(): Promise<{ name: string; age: number }> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: 'yong_git',
        age: 18,
      })
    }, 1000)
  })
}
const { data } = useRequest(
  () => getUsername(),
  {
    formatter: () => {
      return {
        name: 'plugins update',
        age: 20,
      }
    },
  },
  [useFormatter]
)
</script>